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

这篇具有很好参考价值的文章主要介绍了使用cordova 打包的app 如何让视频横屏播放 video。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

安装插件 screen

cordova plugin add cordova-plugin-screen-orientation

cordova官网可显示详细的介绍文章来源地址https://www.toymoban.com/news/detail-661456.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>

到了这里,关于使用cordova 打包的app 如何让视频横屏播放 video的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo

    一个页面同时有很多视频播放,当用户点击一个视频后,开始播放视频,当点击另一个视频后,暂停前一个播放视频,让当前页面只有一个视频处于播放状态 原理 播放视频时,先判断当前是否有视频正在播放,如果没有,则播放,如果有,则暂停其他视频,再播放当前视频

    2024年02月04日
    浏览(84)
  • vue 项目中使用video实现视频播放效果暂停播放(多个视频)

    根据ref判断是否暂停状态返回 true false vue 控制video视频的播放暂停(多个视频) 安装video.js 在main.js中引用 页面

    2024年02月11日
    浏览(50)
  • 微信浏览器(公众号小程序),h5端,小程序 ,app端 解决video视频自动触发播放问题,

    最近一直在开发h5端 和公众号小程序,一般总会遇到video不能自动触发播放(由于不同浏览器限制)、 微信浏览器: 写一个方法: 2.在onload和change方法中执行:调用  不加延时器时器没有效果得,这样在微信公众号在微信浏览器中会实现自动播放 h5端 ,微信小程序 实现自动

    2024年02月05日
    浏览(55)
  • 关于使用video标签插入视频时,视频无法播放的问题

    写代码遇到一个问题:使用video标签插入视频时,在chrome中无法播放,只显示了一个封面图片,在ie却可以播放。 video的使用是看别人的: 由于照搬别人的代码,我写的代码如下: 然后出现问题:只有个封面,不能播放视频 解决过程: ❌我以为是浏览器兼容问题,查资料发

    2024年02月11日
    浏览(71)
  • uniapp小程序中使用video视频播放卡顿

    问题:在使用uniapp小程序的video视频播放,视频已经在播放了,但是进度条没走,还是卡顿的状态(测试ios能正常使用,安卓手机会出现此问题) 在网上找了很多方法,最多的说是用:custom-cache=\\\"false\\\",试了并没有效果,看来和我问题不一样,后来用了个简单粗暴的方法,发现是有效果的,以下是

    2024年04月11日
    浏览(41)
  • Unity视频播放之Video Player的简单使用

    使用Unity自带的VideoPlayer来播放视频 一、准备视频 Unity3D常用视频格式:.mov、.mpg、.mpeg、.mp4、.avi、.asf 如果都不识别,试试转换成ogv格式。转换完成之后,将视频素材文件拖入Unity Assets 文件夹内。 二、创建UI及添加组件 创建RenderTexture资源,设置分辨率,跟视频分辨率一致

    2024年01月18日
    浏览(86)
  • Unity插件-AVPro Video 使用案例之视频播放

    链接:https://pan.baidu.com/s/1Dsf_mO3vSvdLvU-gNX2ulQ 提取码:967i 滑动条不显示,坐标值出现NaN,是由于Slider的Value计算不能除于0,除数为0会造成这种问题 链接:https://pan.baidu.com/s/13PnJNk7h8CWg5Z_zK2gi2Q 提取码:1ua1

    2024年02月11日
    浏览(41)
  • video层级过高,以及界面使用多个video时,在安卓APP上同时播放的问题(uniapp)

    问题一 : 我的界面由于是自定义导航栏,所以使用video时,上滑界面video会直在最上层,盖着  头部导航栏 解决方法 :使用cover-view,自定义头部使用cover-view替换view 问题二 :自定义导航栏上面有menu,点击会出现一个弹出层,但是弹出层会被video压到 解决方法 :使用原生窗体

    2024年02月06日
    浏览(44)
  • 【Flutter】Flutter 使用 video_player 播放视频

    【Flutter】Flutter 使用 video_player 播放视频 大家好,我是小雨青年,今天我要和大家分享一款非常实用的 Flutter 包—— video_player 。这个包可以让我们在 Flutter 应用中轻松地嵌入和控制视频播放,不论是 Android、iOS 还是 Web 平台。 本文重点介绍: video_player 的基本功能和用法 如

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包