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


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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
Js切换功能的简单方法
Nov 23 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python如何读写CSV文件
2020/08/13 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
十一个高级MySql面试题
2014/10/06 面试题
学生个人的自我评价分享
2013/11/05 职场文书
终止劳动合同协议书
2014/04/14 职场文书
关键在于落实心得体会
2014/09/03 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
pycharm无法安装cv2模块问题
2022/05/20 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技