使用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>
相关推荐
栈老师不回家43 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js