android短视频列表自动播放,小程序点击图片实现自动播放视频

通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放。

源码：

{{item.title}}

敬请期待

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)

},

})

视频和图片地址就不提供了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。