<dir class="video-box-inner">
<div class="video-play" @click="videoPlay" v-if="playIcon"></div>
<!-- playsinline="true"
controls
x5-video-player-type="h5"
x-webkit-airplay="true"
controlslist="nofullscreen nodownload noremoteplayback"
webkit-playsinline="true" IOS下防止全屏播放
playsinline="true" 同上
x-webkit-airplay="true" 支持ios的AirPlay功能
x5-video-player-type="h5" 启用同层H5播放器
x5-video-player-fullscreen="true" 全屏设置
x5-video-orientation="portraint" 竖屏
style="object-fit:fill" 封面铺满
-->
<video
v-if="videoUrl"
id="myVideo"
ref="video"
webkit-playsinline="true"
playsinline="true"
x5-playsinline="true"
x5-video-player-fullscreen="false"
x5-video-player-type="h5"
x5-video-orientation="portraint"
width="100%"
height="100%"
style="vertical-align:top;object-fit: fill;"
:poster="detail.pictureUrl"
@click="videoPlay"
>
<source :src="videoUrl" type="video/mp4" />
</video>
</dir>
1.动态src不显示问题:
使用 v-if 就可以了
2.自定义播放按钮:样式如下
.video-box-inner {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.video-play {
width: 130px;
height: 130px;
background: url('https://img.cdn.zhaoshang800.com/img/2020/03/26/broker/b65737cb-5458-47b3-b658-bccd893603e4.png');
background-size: 100% 100%;
position: absolute;
top: 580px;
left: 310px;
right: 0;
bottom: 0;
z-index: 9999;
}
js点击事件:
videoPlay() {
this.videoDoc = document.getElementById("myVideo");
if (this.videoDoc.paused) {
this.videoDoc.play();
this.playIcon = false;
} else {
this.videoDoc.pause();
this.playIcon = true;
}
},