Cordova插件“cordova-plugin-screen-orientation”设置移动端横屏播放video视频文章来源:https://www.toymoban.com/news/detail-661456.html
安装插件 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模板网!