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


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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
一实用的实现table排序的Javascript类库
Sep 12 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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获取远程文件大小
2015/10/20 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
全面理解闭包机制
2016/07/11 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
详解Python中的文件操作
2016/08/28 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
银行贷款承诺书
2014/03/29 职场文书
产品售后服务承诺书
2014/05/21 职场文书
法律专业自荐信
2014/06/03 职场文书
禁止酒驾标语
2014/06/25 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
Django框架中模型的用法
2022/06/10 Python