小程式給視訊加預設圖片封面,點選播放視訊並停止播放上一個視訊
阿新 • • 發佈:2019-01-03
實現的功能:
微信小程式視訊元件新增圖片封面,
點選圖片播放視訊,
點選下一個視訊的封面圖自動停止播放當前視訊並播放點選的視訊。
效果GIF圖:
實現程式碼:
WXML
<view class='vv' wx:for='{{vedio_data}}' wx:key=''> <view class='block' style='margin-left:20rpx;'> <image src='/img/1.png' class='img1' style='margin-left:20rpx'></image> <text class='text'>{{item.title}} </text> <view id="{{index}}" class="cover" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay"> <!-- 視訊圖層 --> <image class="videoVideo2" src="{{item.img}}" mode="scaleToFill"> <!-- 視訊按鈕 --> <image class="videoPlay" src="/img/bf.png" mode="scaleToFill"></image> </image> </view> </view> <!-- 視訊 --> <video src="{{item.url}}" id="{{index}}" class='video' wx:if="{{_index == index}}"> </video> </view>
js
var util = require('../../utils/util'); var app = getApp(); Page({ data: { videoPlay: null, vedio_data: [{ title: '視訊標題1', url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1437596250,215562873&fm=26&gp=0.jpg', }, { title: '視訊標題2', url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545625549289&di=4bf95a6bd0d05003dea5598aa516f718&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F7cec9a37f417277ec1bb62840da6b9d9c2c22f05.jpg', }] }, // 點選cover播放,其它視訊結束 videoPlay: function(e) { var _index = e.currentTarget.id this.setData({ _index: _index }) //停止正在播放的視訊 var videoContextPrev = wx.createVideoContext(this.data._index) videoContextPrev.stop(); setTimeout(function() { //將點選視訊進行播放 var videoContext = wx.createVideoContext(_index) videoContext.play(); }, 500) } })
css
.vv { width: 700rpx; height: 530rpx; border-left: gainsboro 1px solid; border-right: gainsboro 1px solid; border-top: gainsboro 1px solid; margin-bottom: 80rpx; border-radius: 15rpx; overflow: hidden; position: relative; top: 40rpx; left: 20rpx; } /* 小圖示 */ .img1 { width: 36rpx; height: 28rpx; margin-top: 30rpx; } /* 標題文字 */ .text { font-size: 28rpx; color: #585858; margin-left: 10rpx; } /* 視訊 */ .video { width: 100%; height: 450rpx; margin-top: 20rpx; border-bottom-left-radius: 15rpx; border-bottom-right-radius: 15rpx; } .videoVideo2 { width: 703rpx; height: 453rpx; position: absolute; top: 80rpx; left: 20rpx; z-index: 99; } .videoPlay{ position: absolute; width: 80rpx; height: 80rpx; top:45%; left: 45%; margin: -30rpx 0 0 -30rpx; z-index: 100; } /* 底部盒子 */ .bottom { width: 40rpx; height: 40rpx; }