アンドロイドと互換性のH5ビデオラベル、ビデオプレーヤー
<video src="images/aa.mp4" controls="controls">
<source src="images/aa.mp4" type="video/mp4">
</video>
コントロールは、再生コントロールを追加し、iOSのビデオ再生コントロールでcontrols="controls"
、あなたは通常のビデオ再生することができますが、アンドリュースで、再生コントロールはメニューが空白になってアップロードし、そのcontrols
アンドリュースのプロパティは失敗です。
アンドリュースコードの互換性セットが個別に設定する必要があります
<video src="images/aa.mp4" controls="controls" v-if='nativeState'>
<source src="images/aa.mp4" type="video/mp4">
</video>
<video src="images/aa.mp4" id='videoPlay2' ref='videoPlay2' @click='videoBtn($event)' v-else>
<source :src="el.applicationVideo" type="video/mp4">
</video>
export default {
data () {
return {
nativeState:''
};
},
methods: {
videoBtn(e){
var video1 = e.srcElement
function requestFullScreen() { //全屏播放设置
if (video1.requestFullscreen) {
video1.requestFullscreen();
} else if (video1.mozRequestFullScreen) {
video1.mozRequestFullScreen();
} else if (video1.webkitRequestFullScreen) {
video1.webkitRequestFullScreen();
}
}
if(video1.paused){
video1.play();
requestFullScreen();
}else{
video1.pause();
}
}
},
mounted() {
var u = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; //判断浏览器环境
this.nativeState = u;
}
注:あなたがページをジャンプする再生ボタンをクリックすると、フルスクリーン再生を設定することが原因の可能性があります。