小程序多視頻播放，避免同時播放

html

<block wx:if="{{index_info.video != false}}">
<view class="tv">
    <view class="head1">
        <text class="one">動漫<text >說</text></text>
    </view>
    <view class="con">
        <view class="k"></view>
        <block wx:for="{{index_info.video}}" wx:key="id">
        <view class="list">
            <view class="TV">
                <video bindplay="bindPlayCallBack" id="video_{{item.id}}" style="width: 335rpx;height: 200rpx;" src="{{item.video_url}}" poster="{{item.img_url}}"></video>
            </view>
            <view class="word">{{item.title}}</view>
            <view class="fu">{{item.sub_title}}</view>
        </view>
        </block>
        <view class="p"></view>
        </view>
</view>
</block>

js

bindPlayCallBack: function (e) {
    console.log('當前視頻', e.target.id);
    var current_video = e.target.id;
    // 獲取所有的video
    console.log('所有視頻', this.data.index_info.video);
    var that = this;
    let video = that.data.index_info.video;
    for (var i in video) {
        var index_video = 'video_' + video[i].id;
        var videoContextIndex = wx.createVideoContext(index_video);
        if (current_video != index_video) {
            // 暫停其他的
            videoContextIndex.pause();
        }
    }
}

這里用到了，循環json數組的用法。

升級，自定義覆蓋內容

html

<block wx:if="{{index_info.video != false}}">
<view class="tv">
    <view class="head1">
        <text class="one">扶貧政策<text>二十條</text></text>
    </view>
    <view class="con">
        <view class="k"></view>
        <block wx:for="{{index_info.video}}" wx:key="index">
        <view class="list">
            <view class="TV">
                <view class="{{item.hide_cover ?'cover-box-hide':'cover-box'}}" style="z-index:100;" data-index="{{index}}" data-id="{{item.id}}" bind:tap="playVideo">
                    <image class="cover-img" src="/images/fupin/play.png" />
                </view>
                <video bindplay="bindPlayCallBack" id="video_{{item.id}}" object-fit="cover" style="width: 330rpx;height: 190rpx;" src="{{item.video_url}}" show-center-play-btn="{{false}}" show-play-btn="{{item.show_play_btn}}"  show-fullscreen-btn="{{item.show_fullscreen_btn}}" controls="{{true}}"></video>
            </view>
            <view class="word">{{item.title}}</view>
            <view class="fu">{{item.sub_title}}</view>
        </view>
        </block>
        <view class="p"></view>
        </view>
</view>
</block>

js

playVideo: function (e) {
    let id = e.currentTarget.dataset.id;
    let index = e.currentTarget.dataset.index;
    var index_video = 'video_' + id;
    var videoContextCurrent = wx.createVideoContext(index_video);
    videoContextCurrent.play();

    var that = this;
    var show_play_btn = 'index_info.video[' + index + '].show_play_btn';
    var show_fullscreen_btn = 'index_info.video[' + index + '].show_fullscreen_btn';
    var hide_cover = 'index_info.video[' + index + '].hide_cover';
    that.setData({
        [show_play_btn]: true, // 使用[]將字符串包起來，為其賦值
        [show_fullscreen_btn]: true,
        [hide_cover]: true
    });
}

自定義覆蓋內容，添加點擊播放事件，同時開啟播放按鈕和全屏按鈕。同時隱藏覆蓋圖標。