<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;
}
另外加一个视频按钮图片