HarmonyOS Web全屏播放适配

HarmonyOS Web全屏播放适配。
HarmonyOS
Heiang
2024-11-05 10:43:43
1108浏览
回答 1
按赞同
按时间
superinsect
示例如下：
// xxx.ets 
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%') 
  } 
} 
//t1.html 
<!DOCTYPE html> 
  <html> 
  <head> 
  <title>浏览器全屏时横屏播放的demo</title> 
  <style type="text/css"> 
  body { 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
} 
 
video { 
  width: 100%; 
  height: 100%; 
  object-fit: fill; 
} 
</style> 
  </head> 
  <body> 
  <video src="xxx" autoplay controls></video> 
 
  <script type="text/javascript"> 
  var video = document.querySelector('video'); 
 
// 进入全屏 
function requestFullscreen() { 
  video.webkitRequestFullscreen(); 
  return 1; 
} 
 
// 退出全屏 
function exitFullscreen() { 
  document.webkitExitFullscreen(); 
  return 0; 
} 
 
// 监听全屏变化事件 
document.addEventListener('fullscreenchange', function() { 
  if (document.fullscreenElement) { 
 
    // 进入全屏时，将视频旋转90度--> 
    video.style.transform = 'rotate(90deg)'; 
    video.style.width = '100vh'; 
    video.style.height = '100vw'; 
  } else { 
    // 退出全屏时，将视频旋转回来--> 
    video.style.transform = 'none'; 
    video.style.width = '100%'; 
    video.style.height = '100%'; 
  } 
}); 
 
// 监听窗口大小变化事件 
window.addEventListener('resize', function() { 
  if (document.fullscreenElement) { 
    // 窗口大小变化时，调整视频大小 
    video.style.width = '100vh'; 
    video.style.height = '100vw'; 
  } 
}); 
 
// 点击播放按钮时，进入全屏 
video.addEventListener('play', function() { 
  requestFullscreen(); 
  video.style.transform = 'rotate(90deg)'; 
  video.style.width = '100vh'; 
  video.style.height = '100vw'; 
}); 
 
// 点击退出按钮时，退出全屏 
video.addEventListener('ended', function() { 
  exitFullscreen(); 
}); 
</script> 
  </body> 
  </html>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.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
2024-11-05 15:25:50
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS Web全屏播放适配

订阅鸿蒙技术特刊，精选内容抢先看
