微信小程序停止其他视频播放当前视频的实例代码


Posted in Javascript onDecember 25, 2019

微信小程序停止其他视频播放当前视频,代码如下所示:

<view class="content">
 <!--首页-->
 <scroll-view class='nav-page'>
  <view class="item-box " wx:for="{{videelsi}}" wx:key="item">
   <!-- 标题层 -->
   <!-- 视频图片层 -->
   <view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
    <view class="video-cover-box">
     <image class="video-image" src="{{item.cover}}" mode="aspectFit">
     </image>
    </view>
    <!-- 视频按钮 -->
    <image class="video-image-play" src="../image/vidoe.png" mode="scaleToFill"></image>
   </view>

   <!-- 视频播放层 -->
   <video enable-progress-gesture show-play-btn src="{{item.src}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>
   <cover-view style="display: {{ _index == index ? 'none' : 'block' }};" class="video-title-box">
    <cover-view class='video-title'>{{item.title}}</cover-view>
   </cover-view>
  </view>
 </scroll-view>

</view>`

css 样式

.content {
 border-top: transparent 1px solid;
 box-sizing: border-box;
 /* height: 100%; */
 width: 100%;
 padding: 0 20rpx;
}
.container{
 border-top: transparent 1px solid;
 /* box-sizing: border-box; */
 /* height: 100%; */
 width: 100%;
}
view {
 vertical-align:middle;
}
.item-box {
 width: 100%;
 margin-top: 40rpx;
 position: relative;
}
.video-title-box{
 height: 70rpx;
 width: 100%;
 background:rgba(0,0,0,1);
opacity:0.2;
 position: absolute;
 bottom: 10rpx;
}
.video-title{
 text-align: center;
 font-size: 30rpx;
 line-height: 70rpx;
font-weight:400;
color:rgba(255,255,255,1);
}
.item-box{
 width: 100%;
 display: -webkit-box; 
 -webkit-box-orient: vertical;
 -webkit-line-clamp:2;
 overflow: hidden;
 text-overflow:ellipsis;
}

.item-box .video-image-box {
 height: 400rpx;
 width: 100%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-position-x: 30rpx;
 position: relative;
}

.video-cover-box{
 height: 100%;
 width: 100%;
 text-align: center;
 line-height: 0rpx;
}
.item-box:first-of-type{
 margin-top: 0rpx;
}
.item-box .video-image-box .video-cover-box .video-image {
 height: 100%;
 width: 100%;
}

.item-box .video {
 height: 300rpx;
 width: 100%;
 margin: 0 30rpx 0 0;
 position: relative;
}

.item-box .video-image-box .video-image-play {
 position: absolute;
 width: 80rpx;
 height: 80rpx;
 top: calc(50% - 40rpx);
 left: calc(50% - 40rpx);
 z-index: 100;
}

js  代码

const app = getApp()

Page({
 data: {
  videoPlay: null,
  videelsi: [],
 },
 onLoad: function () {
  wx.hideShareMenu()
  this.vidoelist()
 },
 vidoelist() {
  app.api.getData(app.data.https + 'wechat/farm/index').then(res => {
   console.log(res)
   this.setData({
    videelsi: res.data.list
   })
  })
 },
 // 点击cover播放,其它视频结束
 videoPlay: function (e) {
  var _index = e.currentTarget.dataset.id
  this.setData({
   _index: _index
  })
  //停止正在播放的视频
  var videoContextPrev = wx.createVideoContext(_index + "")
  videoContextPrev.stop();

  setTimeout(function () {
   //将点击视频进行播放
   var videoContext = wx.createVideoContext(_index + "")
   videoContext.play();
  }, 500)
 }
})

总结

以上所述是小编给大家介绍的微信小程序停止其他视频播放当前视频,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
vue分页插件的使用方法
Dec 25 #Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 #Javascript
在JavaScript中实现链式调用的实现
Dec 24 #Javascript
vue实现分页加载效果
Dec 24 #Javascript
微信小程序如何获取地址
Dec 24 #Javascript
浅析vue-router中params和query的区别
Dec 24 #Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Javascript中的数学函数
2007/04/04 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
javascript数组的使用
2013/03/28 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
原生JS实现天气预报
2020/06/16 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Django中Forms的使用代码解析
2018/02/10 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
神龙架导游词
2015/02/11 职场文书
毕业生个人总结
2015/02/28 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
关于JavaScript轮播图的实现
2021/11/20 Javascript
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python