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


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实现原理介绍)
Nov 08 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
JS解析XML实例分析
2015/01/30 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python 实现链表实例代码
2017/04/07 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python如何生成各种随机分布图
2018/08/27 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
如何基于python实现归一化处理
2020/01/20 Python
Python3如何判断三角形的类型
2020/04/12 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
《月迹》教学反思
2014/02/19 职场文书
植树节活动总结
2014/04/30 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Python机器学习之基础概述
2021/05/19 Python
python基础之错误和异常处理
2021/10/24 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL