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

最新推荐文章于 2022-05-17 09:16:01 发布

花儿为何那样红

最新推荐文章于 2022-05-17 09:16:01 发布

阅读量526

点赞数

分类专栏： html 文章标签：小程序

本文链接：https://blog.csdn.net/csdnXiaoZou/article/details/103320443

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先看效果：

这里就不贴全部代码了。

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);
    },