使用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>
相关推荐
吃杠碰小鸡39 分钟前
commitlint校验git提交信息
前端
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员2 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐2 小时前
前端图像处理(一)
前端
程序猿阿伟2 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背2 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript