使用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>
相关推荐
FreeCultureBoy39 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom1 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript