HarmonyOS Web全屏播放适配

HarmonyOS Web全屏播放适配。
HarmonyOS
Heiang
2024-11-05 10:43:43
浏览
回答 1
待解决
回答 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>
2024-11-05 15:25:50
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS Web全屏播放适配

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