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


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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
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
文件上传的实现
2006/10/09 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JQuery animate动画应用示例
2019/05/14 jQuery
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python实现两张图片的像素融合
2019/02/23 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Pycharm github配置实现过程图解
2020/10/13 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
database面试题
2013/03/28 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
送餐员岗位职责范本
2014/02/21 职场文书
婚前保证书
2014/04/29 职场文书
小学元宵节活动总结
2015/02/06 职场文书
班主任寄语2016
2015/12/04 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers