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


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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
图文详解vue框架安装步骤
Feb 12 Javascript
个人小程序接入支付解决方案
May 23 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python交互式图形编程实例(二)
2017/11/17 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python matplotlib可视化实例解析
2020/06/01 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
一套软件测试笔试题
2014/07/25 面试题
技校生自我鉴定
2013/12/08 职场文书
执行总经理岗位职责
2014/02/03 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android