小程序多视频播放，避免同时播放

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=" 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=" 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
    });
}

自定义覆盖内容，添加点击播放事件，同时开启播放按钮和全屏按钮。同时隐藏覆盖图标。