求助 小程序怎么实现一个视频播放的时候,其他视频停止播放;下面的代码好像只支持两个视频的暂停

<video id="video1" data-id="1" src="https://b.mp4" bindplay="StartPlay"></video>

<video id="video2" data-id="2" src="https://a.mp4" bindplay="StartPlay"></video>

 

  StartPlay:function(e){

    console.log(e)

    var ind = e.currentTarget.dataset.id

    if(ind=="1"){

      var v="video"+"2"

    //this.videoContext = wx.createVideoContext('video2')

    }else{

      var v = "video" + "1"

      //this.videoContext = wx.createVideoContext('video1')

    }

    this.videoContext = wx.createVideoContext(v)

    this.videoContext.pause()

  }

已经解决

//index.js

//获取应用实例

const app = getApp()

 

Page({

data: {

videoPlay: null,

dataList: [],

},

onLoad: function () {

this.getData();

wx.hideShareMenu();

},

// 点击cover播放,其它视频结束

videoPlay: function (e) {

var _index = e.currentTarget.dataset.id

this.setData({

_index: _index

})

//停止正在播放的视频

var videoContextPrev = wx.createVideoContext(_index+"")

videoContextPrev.stop();

 

setTimeout(function () {

//将点击视频进行播放

var videoContext = wx.createVideoContext(_index + "")

videoContext.play();

}, 500)

},

// 模拟数据加载

getData: function () {

this.setData({

dataList: [{ "id": 6193654, "title": "红视觉炫酷片头", "content": "https://txmov2.a.yximgs.com/upic/19/01/08/16/BMjAxOTAxMDgxNjE4MjRfMTE1NzA4NjQ1M185ODEwNTk0MjM4XzNfMw==_b_B7b6840c2c2e1f89c190ccb290e4e5e10.mp4", "cover": "https://i.loli.net/2019/01/09/5c3554aa0a431.png" },


 

{ "id": 6193715, "title": "红视觉介绍", "content": "https://txmov2.a.yximgs.com/upic/2019/01/08/16/BMjAxOTAxMDgxNjIxMDRfMTE1NzA4NjQ1M185ODEwNjMyMTIwXzNfMw==_b_Bac5d52f63574557311f2e07f09e25b.mp4", "cover": "https://i.loli.net/2019/01/09/5c35555f87360.png" },


 

{ "id": 6193932, "title": "红视觉花絮", "content": "https://txmov2.a.yximgs.com/upic/2019/01/10/12/BMjAxOTAxMTAxMjA5MDdfMTE1NzA4NjQ1M185ODQzNDcyMTE0XzNfMw==_b_B331a82da164b21315c6b054ddfa386.mp4", "cover": "https://i.loli.net/2019/01/09/5c35566f75420.jpg" },


 

{ "id": 6193729, "title": "双色渐变美甲教程", "content": "https://txmov2.a.yximgs.com/upic/2019/01/08/16/BMjAxOTAxMDgxNjI0MDZfMTE1NzA4NjQ1M185ODEwNjc1NzQ3XzNfMw==_b_B61809238d41d931c3267f614b85940.mp4", "cover": "https://i.loli.net/2019/01/09/5c3556177f326.jpg" },


 

{ "id": 6193504, "title": "职业妆教学视频", "content": "http://vliveachy.tc.qq.com/vedu.tc.qq.com/AE9wMuhlenpXMZHJT_FXyE4U2sMMp3N8GJ2kHGJ2rSJc/n14302zy8yf.p701.1.mp4?sdtfrom=v1101&guid=ffe42ed1181c849e2f3e1a73306c66ad&vkey=73E93560C7C5C00FD2CC8F9472ACC0E45B0C18F07B48BEBAE4CB6DF783EEC5F61CF8FCCCDA4B6E1E8BCEFB2A0A5C4BADC530474AA2BCF504DBF18D06C1F8269E0269CFDE74DA6330356363A657A25AB22E8B63AF542E4D6BA0B5986FE5EBBAB88510F609E4A2B89739709DDFD0EEA1&ocid=2509903276&ocid=2378240940", "cover": "https://i.loli.net/2019/01/10/5c36b8f1a1c8a.png"},



 

{ "id": 6193576, "title": "半永久教学视频", "content": "http://vliveachy.tc.qq.com/vedu.tc.qq.com/A2GXxiUkywB1gS3Z65qNRfMJYbutbTDJ6xlQyfDyJMBA/q14306l8evj.p701.1.mp4?sdtfrom=v1101&guid=ffe42ed1181c849e2f3e1a73306c66ad&vkey=A9BBFC147D89D375D4683A14C9A8D6F6F2157033045E9A2C175413A901CBDA16B0E2137372E127CC966AD89BF902608BCF16754D1EEE9BF15238B20A81300F0BC4C19A9D917F0ED0E329047BBFC4E5111D1538471C43214DAB97B7542ADB923D42A0CBA6131014D3B96B1EC0ED9D1B&ocid=2394493868&ocid=297866156", "cover": "https://i.loli.net/2019/01/10/5c36ba84127fc.png" },


 

{ "id": 6193803, "title": "约会妆教学视频", "content": "http://vliveachy.tc.qq.com/vedu.tc.qq.com/AmEyg6BqIpMD8tCmEZiYJ9GkcI6WujQSbuSKhNZAF0Wo/b1430fywqrm.p701.1.mp4?sdtfrom=v1101&guid=ffe42ed1181c849e2f3e1a73306c66ad&vkey=8107B5D7C70ED4376A5F5E659FE667DD4E3E110222059C6ABE1DC052C3F9E23E6848879319CF7D1D4AD9D2523CB1FFBD6ADB44680CCD549F846ECD154F4500086D109BE7D77569CDE5C529519B90D1D68E90520E4795C46CD95E41B9A3C9FCF874F9178DD884A58F82F648B6FDFE57A0&oci224793516&ocid=3569423276", "cover": "https://i.loli.net/2019/01/10/5c36ba6c543c6.png" },


 

{ "id": 6193883, "title": "五色美甲教学视频", "content": "http://vliveachy.tc.qq.com/vedu.tc.qq.com/AEDN572upjGAM1oIiV6A45Mm-ESUe8AI0FEYbMUCSFnc/v1430z26tps.p701.1.mp4?sdtfrom=v1101&guid=ffe42ed1181c849e2f3e1a73306c66ad&vkey=AC8FA7BC5342A481D4F63EFF20AB5E8C1EFE2E67BF7D73375FA48CABEADEEAB3DE6E5A72A1098714513B31A1668F6957798ED3983FB7436A6CD1600CA0EA8F9C5D9748DC16D3A255CCE3A3C041B9FC0980E2E5EA52CFE078888B552D56F69C9A43A9378446C5F5458F23744DABE731&ocid=2696483756&ocid=2395018156", "cover": "https://i.loli.net/2019/01/10/5c36b5df5a930.png" },




 

]});

wxml部分

<!--index.wxml-->

<view class="container">

<!--首页-->

<scroll-view class='nav-page'>

<view class="item-box " wx:for="{{dataList}}" wx:key="item">

<!-- 标题层 -->

<view class="video-title-box">

<view class='video-title'>{{item.title}}</view>

</view>

 

<!-- 视频图片层 -->

<view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">

<view class="video-cover-box">

<image class="video-image" src="{{item.cover}}" mode="aspectFit">

</image>

</view>

<!-- 视频按钮 -->

<image class="video-image-play" src="/image/icon_short.png" mode="scaleToFill"></image>

</view>

 

<!-- 视频播放层 -->

<video src="{{item.content}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>

 

</view>

</scroll-view>

 

</view>

 

wxss部分

/**index.wxss**/

 

.item-box .video-title-box {

width: 100%;

margin-bottom: 20rpx;

}

 

.item-box .video-title-box .video-title {

width: 100%;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp:2;

overflow: hidden;

text-overflow:ellipsis;

}

 

.item-box .video-image-box {

height: 400rpx;

width: 100%;

background-repeat: no-repeat;

background-size: 100% 100%;

background-position-x: 30rpx;

position: relative;

}

 

.video-cover-box{

height: 100%;

width: 100%;

background: #000;

text-align: center;

}

 

.item-box .video-image-box .video-cover-box .video-image {

height: 100%;

width: 100%;

}

 

.item-box .video {

height: 400rpx;

width: 100%;

margin: 0 30rpx 0 0;

position: relative;

}

 

.item-box .video-image-box .video-image-play {

position: absolute;

width: 80rpx;

height: 80rpx;

top: calc(50% - 40rpx);

left: calc(50% - 40rpx);

z-index: 100;

}

另外加一个视频按钮图片

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值