通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放。
源码：
<view>
<view class='vv' wx:for='{{vedio_data}}' wx:key=''>
<view class='block' style='margin-left:20rpx;'>
<image src='/img/1.png' class='img1' style='margin-left:20rpx'></image>
<text class='text'>{{item.title}} </text>
<view id="{{index}}" class="cover" style="display: {{ _index == index " bindtap="videoPlay" >
<!-- 视频图层 -->
<image class="videoVideo2" src="/UploadFiles/2021-04-02/{{item.img}}">
CSS:
/* 边框 */
.vv {
width: 700rpx;
height: 530rpx;
border-left: gainsboro 1px solid;
border-right: gainsboro 1px solid;
border-top: gainsboro 1px solid;
margin-bottom: 80rpx;
border-radius: 15rpx;
overflow: hidden;
position: relative;
top: 40rpx;
left: 20rpx;
}
/* 小图标 */
.img1 {
width: 36rpx;
height: 28rpx;
margin-top: 30rpx;
}
/* 标题文字 */
.text {
font-size: 28rpx;
color: #585858;
margin-left: 10rpx;
}
/* 视频 */
.video {
width: 100%;
height: 450rpx;
margin-top: 20rpx;
border-bottom-left-radius: 15rpx;
border-bottom-right-radius: 15rpx;
}
.videoVideo2 {
width: 703rpx;
height: 453rpx;
position: absolute;
top: 80rpx;
left: 20rpx;
z-index: 99;
}
.videoPlay{
position: absolute;
width: 80rpx;
height: 80rpx;
top:45%;
left: 45%;
margin: -30rpx 0 0 -30rpx;
z-index: 100;
}
/* 底部盒子 */
.bottom {
width: 40rpx;
height: 40rpx;
}
/* 底部图片 */
.di {
display: flex;
flex-direction: row;
padding: 60rpx 0rpx 100rpx 280rpx;
}
/* 底部文字 */
.bottom_text {
font-size: 34rpx;
color: #d8d8d8;
margin-left: 10rpx;
}
JS:
// pages/class/class.js
Page({
/**
* 页面的初始数据
*/
data: {
videoPlay: null,
vedio_data: [{
title: '无13131（大班）',
url: 'xxx',
img: 'xxx',
},
{
title: ' 如何23 1 、 2 、2423、4）',
url: 'xxx',
img: 'xxx'
},
{
title: '温热碍',
url: 'xxx',
img:'xxx'
},
{
title: '挑嘎嘎嘎输',
url: 'xxx',
img: 'xxx'
},
{
title: '延伸挑战：运输圆球',
url: 'xxx',
img:'xxx'
},
]
},
// 点击cover播放，其它视频结束
videoPlay: function (e) {
var _index = e.currentTarget.id
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(this.data._index)
videoContextPrev.stop();
setTimeout(function(){
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index)
videoContext.play();
},500)
},
})
视频和图片地址就不提供了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“小程序点击图片实现自动播放视频”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。