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


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 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
js Math 对象的方法
Sep 01 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
用webAPI实现图片放大镜效果
Nov 23 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脚本的10个技巧(6)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python中PIL安装简单教程
2016/04/21 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
家长学校工作方案
2014/05/07 职场文书
节水标语大全
2014/06/11 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
高三物理教学反思
2016/02/20 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang