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


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获取事件对象代码
Aug 05 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
详解Webpack DLL用法以及功能
Jul 11 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
js变量以及其作用域详解
2020/07/18 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python批量修改文件名的实现代码
2014/09/01 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
学校联谊活动方案
2014/02/15 职场文书
爱国主义演讲稿
2014/05/07 职场文书
主题党日活动总结
2014/07/08 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
会计师事务所实习证明
2014/11/16 职场文书
植树节新闻稿
2015/07/17 职场文书
婚庆答谢词大全
2015/09/29 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书