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


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 异步处理进度条
Apr 01 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
javascript实现的简单计时器
Jul 19 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php木马攻击防御之道
2008/03/24 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Django配置跨域并开发测试接口
2020/11/04 Python
广州迈达威.net面试题目
2012/03/10 面试题
前台领班岗位职责
2013/12/04 职场文书
党员自我评价分享
2013/12/13 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
施工员岗位职责
2014/03/16 职场文书
新学期教师寄语
2014/04/02 职场文书
2014年终工作总结范本
2014/12/15 职场文书
清洁工个人总结
2015/03/04 职场文书
博士导师推荐信
2015/03/25 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL