小程序点击图片实现自动播放视频


Posted in Javascript onMay 29, 2020

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

源码:

<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 ? 'none' : 'block' }};" bindtap="videoPlay" >
 <!-- 视频图层 -->
 <image class="videoVideo2" src="{{item.img}}" mode="scaleToFill">
  <!-- 视频按钮 -->
  <image class="videoPlay" src="/img/bf.png" mode="scaleToFill"></image>
 </image>
 </view>
 </view>
 <!-- 视频 -->
 <video src="{{item.url}}" id="{{index}}" class='video' wx:if="{{_index == index}}" >
<!-- log -->
 </video>
 </view>
 <view class='di'>
 <image src='/img/qd.png' class='bottom'></image>
 <text class='bottom_text'>敬请期待</text>
 </view>
</view>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
js word表格动态添加代码
Jun 07 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 #Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python计算时间差的方法
2015/05/20 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
养成教育工作总结
2015/08/13 职场文书
财务人员入职担保书
2015/09/22 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python