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>