使用cordova 打包的app 如何让视频横屏播放 video

Cordova插件"cordova-plugin-screen-orientation"设置移动端横屏播放video视频

安装插件 screen

html 复制代码
cordova plugin add cordova-plugin-screen-orientation

cordova官网可显示详细的介绍

html 复制代码
<template>
  <div>
    <video
      class="video"
      autoplay
      muted
      playsinline
      webkit-playsinline
      x-webkit-airplay="allow"
      x5-video-orientation="landscape" 
      controls
      disablepictureinpicture
      controlslist="nodownload noplaybackrate"
      style="width: 100%;"
      src="../assets/123.mp4"
    ></video>
    <div></div>
    <fullScroll />
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.landscapeMode()
  },
  beforeDestroy() {
   
  },
  methods: {
    landscapeMode(){
    // 获取页面所有的video
      let items = document.querySelectorAll('.video')
      items.forEach((item, index)=> {
        console.log(item)
        // 给所有的视频组件注册全屏时间  点击全屏按钮的时候触发  这里为了浏览器兼容 使用循环注册多个事件
        for (const it of ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange']) {
          item.addEventListener(it, () => {
            console.log('注册')
            console.log(document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen)
            // 兼容性全屏判断 全屏的时候 触发cordova的横屏
            if (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen) {
              // cordova.plugins.screenorientation.setOrientation(
              //   "landscape"
              // );
              screen.orientation.lock('landscape-primary').then((res)=>{
                console.log(res)
              },e=>{
                console.log(e)
              })
              // console.log("全屏播放横屏");
            } else {
              // cordova.plugins.screenorientation.setOrientation("portrait");
              //   console.log("退出全屏播放竖屏");
              screen.orientation.lock('portrait-primary').then((res)=>{
                console.log(res)
              },e=>{
                console.log(e)
              })
            }
          })
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
相关推荐
萌萌哒草头将军5 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中5 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊6 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj6 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝6 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3117 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion7 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜7 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾7 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*7 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm