微信小程序方法
<video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video>
showVideo1() {
let videoContext = wx.createVideoContext('myVideo1'); //獲取video的dom
videoContext.requestFullScreen({ direction: 90 });
videoContext.play() //視頻播放
}
screenChange(e) {
let fullScreen = e.detail.fullScreen //值true為進(jìn)入全屏，false為退出全屏
let videoContext = wx.createVideoContext('myVideo1');
},
H5方法
<video id="product1" controls="false" webview.allowsInlineMediaPlayback=YES; x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" :src="videoPath+'qhtalent202112/product-info.mp4'">
</video>
//判斷進(jìn)入退出全屏
checkIsFullScreen() {
var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
},
// 全屏
Screen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.oRequestFullscreen) {
element.oRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
} else {
var requestFullscreen =
document.documentElement.requestFullscreen ||
document.documentElement.webkitRequestFullscreen ||
document.documentElement.mozRequestFullscreen ||
document.documentElement.requestFullScreen ||
document.documentElement.webkitRequestFullScreen ||
document.documentElement.mozRequestFullScreen;
if (requestFullscreen) {
requestFullscreen.call(document.documentElement);
}
//ios不處理祖屏，自動(dòng)就會(huì)全屏
}
element.play()
},
//點(diǎn)讀筆播放視頻
productBtn() {
let product1 = document.getElementById('product1')
product1.play()
this.Screen(product1)
},
document.addEventListener('fullscreenchange', () => {
if (this.checkIsFullScreen()) {
this.productPlay = true
console.log("進(jìn)入全屏");
} else {
console.log("退出全屏");
this.productPlay = false
document.getElementById('product1').pause()
}
});
8
