javascript
<video v-if="isShow" :id="list._id+'_'+index" ref="videoPlayer" :muted="true"
enable-play-gesture :controls="true" :show-center-play-btn="true" play-btn-position="center"
:http-cache="true" :show-play-btn="true" :show-fullscreen-btn="false" :show-loading="true"
enable-progress-gesture :src="list.video_src" @ended="ended" @play="play(dataList[k].tv_id)"
poster-size="fill" object-fit="fill"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
:poster="dataList[k].tv_image">
</video>属性解释
-
v-if="isShow"：用于根据isShow的值来判断是否显示该视频标签。如果isShow的值为true，则显示视频。 -
:id="list._id+'_'+index"：为视频元素设置一个唯一的id，通常是使用_id（可能是视频的唯一标识符）与index（循环索引）的组合。 -
ref="videoPlayer"：为视频元素设置一个引用名称，以便在 Vue.js 中能够通过引用操作视频元素。 -
:muted="true"：设置视频是否静音。 -
enable-play-gesture：允许播放手势，即用户通过点击屏幕来播放/暂停视频。 -
:controls="true"：显示视频的控制条，包括播放、暂停、音量控制等。 -
:show-center-play-btn="true"：显示一个居中的播放按钮。 -
play-btn-position="center"：设置播放按钮的位置在中心。 -
:http-cache="true"：允许使用 HTTP 缓存。 -
:show-play-btn="true"：显示播放按钮。 -
:show-fullscreen-btn="false"：不显示全屏按钮。 -
:show-loading="true"：显示加载状态。 -
enable-progress-gesture：允许使用手势来控制进度。 -
:src="list.video_src"：设置视频的源地址。 -
@ended="ended"：当视频播放结束时触发ended事件。 -
@play="play(dataList[k].tv_id)"：当视频开始播放时触发play事件，并调用play方法。 -
poster-size="fill"：设置海报（封面）的填充方式。 -
object-fit="fill"：设置视频的填充方式。 -
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"：设置视频的样式，包括宽度、高度和背景颜色。 -
:poster="dataList[k].tv_image"：设置视频的封面图片。
onLoad中添加
页面加载时就调用自动播放，保证首次进入可以自动播放
加延时目的：防止微信浏览器检测到自动播放
javascript
setTimeout(()=>{
this.playVideo(); // 自动播放方法
},1000)onShow中添加
页面显示时延迟执行，保证跳转页面之后依然可以自动播放
javascript
setTimeout(()=>{
this.playVideo();
},500)methods中添加
自动播放方法
javascript
playVideo() {
// 在这里调用播放视频的逻辑，可能需要获取视频元素并调用 play() 方法
const videoElement = this.$refs.videoPlayer; // 获取视频元素的引用
if (videoElement) {
videoElement[0].play()
}
},change()方法中添加
保证上下滑动视频时，仍然可以自动播放
javascript
setTimeout(()=>{
this.playVideo();
},1000)