如何适配网页内播放器全屏

如何适配网页内播放器全屏

HarmonyOS
2024-06-13 23:36:50
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
pfuchenlu

示例代码如下:

import web_webview from '@ohos.web.webview' 
import mediaquery from '@ohos.mediaquery'; 
import window from '@ohos.window'; 
import common from '@ohos.app.ability.common'; 
 
@Entry 
@Component 
struct MediaQueryExample { 
  @State color: string = '#DB7093'; 
  @State text: string = 'Portrait'; 
  @State portraitFunc: mediaquery.MediaQueryResult | void | null = null; 
  handler: FullScreenExitHandler | null = null 
  // 当设备横屏时条件成立 
  listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)'); 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { 
    if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态,更改相应的页面布局 
      this.color = '#FFD700'; 
      this.text = 'Landscape'; 
    } else { 
      this.color = '#DB7093'; 
      this.text = 'Portrait'; 
    } 
  } 
 
  aboutToAppear() { 
    // 绑定当前应用实例 
    // 绑定回调函数 
    this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { 
      this.onPortrait(mediaQueryResult) 
    }); 
  } 
 
  // 改变设备横竖屏状态函数 
  private changeOrientation(isLandscape: boolean) { 
    // 获取UIAbility实例的上下文信息 
    let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; 
    // 调用该接口手动改变设备横竖屏状态 
    window.getLastWindow(context).then((lastWindow) => { 
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) 
    }); 
  } 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('t1.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .onFullScreenEnter((event) => { 
          console.log("onFullScreenEnter...") 
          this.handler = event.handler 
          this.changeOrientation(true); 
        }) 
        .onFullScreenExit(() => { 
          console.log("onFullScreenExit...") 
          if (this.handler) { 
            this.handler.exitFullScreen() 
            this.changeOrientation(false); 
          } 
        }) 
    } 
    .width('100%').height('100%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
分享
微博
QQ
微信
回复
2024-06-14 22:44:49
相关问题
HarmonyOS Web全屏播放适配
341浏览 • 1回复 待解决
HarmonyOS 播放器后台暂停音频播放
21浏览 • 1回复 待解决
HarmonyOS 播放器功能拓展
168浏览 • 1回复 待解决
HarmonyOS 视频播放器问题
278浏览 • 1回复 待解决
HarmonyOS 视频播放器如何旋转屏幕
212浏览 • 1回复 待解决
java播放器怎么用解码?
5068浏览 • 1回复 待解决
使用AVPlayer实现视频播放器
1593浏览 • 1回复 待解决
HarmonyOS AVPlayer播放器UI设置
277浏览 • 1回复 待解决
HarmonyOS 点播视频播放器选型咨询
468浏览 • 1回复 待解决
HarmonyOS Video播放器,autoplay false黑屏
188浏览 • 1回复 待解决
播放器】硬解码支持的Demo
2055浏览 • 1回复 待解决
HarmonyOS 需要视频播放器的选型
184浏览 • 1回复 待解决
系统播放器AVplayer相关规格问题
745浏览 • 1回复 待解决
AudioRenderer和播放器是什么关系?
3879浏览 • 1回复 待解决
HarmonyOS 关于音频播放器的最佳实践
220浏览 • 1回复 待解决
请提供HarmonyOS音频播放器实例代码
451浏览 • 0回复 待解决