4.20
开始制作有关视频播放的内容 <template> <view> <swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo"> <swiper-item v-for="(item,index) in video_list"> <video :src="item.video_url" preload show-play-btn="true" controls="false" v loop="true" :id="`video_${item.video_id}`" objectFit="fill" :enable-progress-gesture="false" @click="clickVideo" ref="video_url" play-btn-position="center" class="video" :poster="item.cover_url" @timeupdate="timeupdate"> </video> <cover-image class="play" v-if="show_play" @tap="videoPlay" src="/static/video/play_1.png"></cover-image> <cover-view class="cover-view-left"> <text class="view-left-text">@{{ item.nickname }}</text> <view class="view-left-text-content"> <text class="text-content-text">{{ item.video_describe }}</text> </view> </cover-view> <cover-view class="cover-view-right"> <cover-image :src="item.cover_url" class="avater img" @click.stop="tapAvater"></cover-image> <text class="right-follow">+</text> <cover-image style="position:relative;top:-20upx;" :src="item.is_dianzan ? '/static/video/axc.png' : '/static/video/bed.png'" class="img-left" @click.stop="tapLove"></cover-image> <text class="right-text">{{ item.dianzan }}</text> <cover-image src="/static/video/ay2.png" style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image> <text class="right-text">{{ item.pinglun }}</text> <cover-image src="/static/video/b6p.png" style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image> <text class="right-text">{{ item.zhuanfa }}</text> <cover-image src="/static/video/changpian.png" class="musicIcon img"> </cover-image> <cover-view class="progressBar" :animation="animationData" ></cover-view> </cover-view> </swiper-item> </swiper> </view> </template> <script> let play = false; export default { props: { video_list: { type: Array, default: {} } }, data() { return { time: 0, barWidth:0, animationData: {}, times:null, play: false, show_play:false, current_index: 0 }; }, created() { setTimeout(()=>{ play = true; this.videoPlay(); },1000) }, methods: { timeupdate(event) { let t_w = parseInt(this.width); this.duration = event.detail.duration; this.time = event.detail.currentTime; let width = (this.time / this.duration) * t_w; let w = 0; }, clickVideo() { // console.log('单视频点击事件'); this.videoPlay(); }, videoPlay() { let video_id = this.video_list[this.current_index].video_id; if (play) { console.log('播放视频',`video_${video_id}`); this.videoCtx = uni.createVideoContext(`video_${video_id}`, this); this.videoCtx.play(); this.show_play = false; play = false; } else { console.log('暂停视频',`video_${video_id}`); this.videoCtx = uni.createVideoContext(`video_${video_id}`, this); this.videoCtx.pause(); this.show_play = true; play = true; } }, videoPause() { let video_id = this.video_list[this.current_index].video_id; this.videoCtx = uni.createVideoContext(`video_${video_id}`, this); this.videoCtx.pause(); this.show_play = true; play = true; }, changeVideo(e){ // 暂停之前的视频 this.videoPause(); this.current_index = e.detail.current; console.log(e.detail.current); // 播放现在的视频 this.videoPlay(); // 判断是否第一条 if( e.detail.current == 0 ){ console.log('到顶了'); return false; } // 判断是否最后一条 if( e.detail.current == this.video_list.length-1 ){ console.log('到底了'); return false; } }, tapMsg(e) { console.log(5, e); }, tapShare(e) { console.log(6, e); }, tapLove(e) { // item.is_dianzan this.video_list[this.current_index].is_dianzan = !this.video_list[this.current_index].is_dianzan; console.log(7, e); } }, watch: { play(newVal, oldVal) { this.videoPlay(); } } }; </script> <style> .swiper{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } .video { width: 100%; height: 100%; position: relative; } .play{ position: absolute; width: 20vw; height: 20vw; left: 40vw; top: 40vh; opacity: 0.5; } .progressBar { border-radius: 2upx; height: 4upx; background-color: #FF4500; z-index: 999999; position: absolute; bottom: 68rpx; } .cover-view-left { position: absolute; margin-left: 20upx; width: 580upx; bottom: 110upx; z-index: 9999; font-size: 14px; color: #ffffff; } .left-text { font-size: 14px; color: #ffffff; } .cover-view-right { position: absolute; bottom: 40px; right: 30upx; z-index: 9999; text-align: center; } .avater { border-radius: 50%; border-width: 2px; border-style: solid; border-color: #ffffff; } .img { height: 90upx; width: 90upx; margin-bottom: 110upx; } .img-left { width: 80upx; height: 66upx; padding-left: 4px; } .right-follow { position: absolute; z-index: 100; top: 75upx; left: 28upx; color: #ffffff; font-size: 16px; width: 34upx; height: 34upx; background-color: #f12f5b; text-align: center; line-height: 34upx; border-radius: 17upx; } .right-text { color: #ffffff; font-size: 11px; text-align: center; margin-bottom: 40upx; } .musicIcon { margin-top: 40upx; } @keyframes rotating { from { transform: rotate(0); } to { transform: rotate(360deg); } } .view-left-text-content { flex: 1; } .view-left-text { color: #ffffff; font-size: 18px; margin-bottom: 10upx; font-weight: bold; } .text-content-text { color: #ffffff; font-size: 16px; line-height: 50upx; height: 100upx; overflow: hidden; } </style>