小程序视频多个视频播放与暂停

最新推荐文章于 2020-03-11 14:42:36 发布

原创最新推荐文章于 2020-03-11 14:42:36 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现视频组件控制的方法，通过使用video组件并结合自定义类和数据绑定，实现了多个视频之间的播放控制。文章详细展示了如何在点击某个视频时，能够自动停止当前播放的视频，并开始播放被点击的视频。

先看效果：

这里就不贴全部代码了。

wxml

<view class="pvideo" wx:if="{{item.video}}">
    <video src="{{item.video}}" controls id='video{{index}}' data-index="{{index}}" bindplay="videoPlay"></video>
</view>

data{
　　videoIndex：0，
},

videoPlay : function(e){
        var index = e.currentTarget.dataset['index'];
        //停止正在播放的视频
        if (index != this.data.videoIndex){
            var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex)
            videoContextPrev.stop()
        }
        //将点击视频进行播放
        this.setData({
            videoIndex: index
        })
        setTimeout(function () {
            var videoContext = wx.createVideoContext('video' + index)
            videoContext.play()
        },200);
    },
　　videoIndex：0，
},

videoPlay : function(e){
        var index = e.currentTarget.dataset['index'];
        //停止正在播放的视频
        if (index != this.data.videoIndex){
            var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex)
            videoContextPrev.stop()
        }
        //将点击视频进行播放
        this.setData({
            videoIndex: index
        })
        setTimeout(function () {
            var videoContext = wx.createVideoContext('video' + index)
            videoContext.play()
        },200);
    },