E企盈营销工具技术服务商 热线:4006-838-530

小程序列表视频控习水县E企盈小程序制播放和设置封面与标题

代码主要实现视频列表中当播放当前视频需要点击下一个的时候,上一个视频关闭,点击视频播放上一个视频并显示封面和标题(回到当初的面貌)1.wxml文件注:这里我没有写for循环,列举三个表达下效果。myVideo1可以代表为传过来的视频id{{ index == 1 ? ‘none’ : ‘block’ }};” id=“1” 中的1代表传过来的id,在实际操作中自己加上:如 {{ index == id? ‘none’ : ‘block’ }} 即可view  view  class="video"    video id="myVideo1" class="myVideo"  src="http://video.pearvideo.com/mp4/adshort/20181117/cont-1477753-13248875_adpkg-ad_hd.mp4" custom-cache="{{false}}"    /video    view style="display: {{ index == 1 ? 'none' : 'block' }};" id="1"    cover-view class="controls" id="controls"    //封面图片    cover-image src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" /    /cover-view    cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;"CNN起诉川普政府案宣判,CNN获胜CNN起诉川普政府案宣判,CNN获胜/cover-view    cover-view class="play" style="z-index:200;"    //中间的播放图片标志    cover-image bindtap="bindplay" data-id="1" src="../../img/play.png" style="width:160rpx;"/    /cover-view    /view    view class="info"image src="http://image.pearvideo.com/node/35-10030502-logo.jpg" class="avatar"  /imagespan id="name"看看新闻/span/view/viewview style="clear:both"/viewview  class="video"    video id="myVideo2" class="myVideo"  src="http://video.pearvideo.com/mp4/adshort/20181116/cont-1477146-13247738_adpkg-ad_hd.mp4" custom-cache="{{false}}"    /video    view style="display: {{ index == 2 ? 'none' : 'block' }};"    cover-view class="controls"    cover-image src="http://image.pearvideo.com/cont/20181116/cont-1477146-11703021.jpeg" /    /cover-view    cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;"靓声界男神陈奕迅英音读《小王子》/cover-view    cove开通波士顿包小程序电话:4006-838-530r-view class="play" style="z-index:200;"    cover-image bindtap="bindplay" data-id="2" src="../../img/play3.png" style="width:140rpx;" /    /cover-view    /viewview class="info"image src="http://image.pearvideo.com/node/19-10027896-logo.jpg" class="avatar"  /imagespan id="name"眼镜儿/span/view/viewview style="clear:both"/viewview  class="video"    video id="myVideo3" class="myVideo"  src="http://video.pearvideo.com/mp4/short/20181118/cont-1478240-13253290-hd.mp4" custom-cache="{{false}}"    /video    view style="display: {{ index == 3 ? 'none' : 'block' }};"    cover-view class="controls"    cover-image src="http://image1.pearvideo.com/cont/20181118/cont-1478240-11705317.png" /    /cover-view    cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;"设计赛评委:重庆是生机勃勃的城市/cover-view    cover-view class="play" style="z-index:200;"    cover-image bindtap="bindplay" data-id="3" src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" style="width:160rpx;" /    /cover-view    /view    view class="info"image src="http://image.pearvideo.com/node/1548-10523493-logo.png" class="avatar"  /imagespan id="name"梨重庆/span/view/viewview style="clear:both"/view/view

2. jsPage({  /**   * 页面的初始数据   */  data: {    videoimage: "block" ,//默认显示封面    bindplay: null,    _index:0,  },  //点击播放按钮,封面图片隐藏,播放视频  bindplay: function (e) {    var index = e.currentTarget.dataset.id;    var that = this;    this.setData({      index: index    })    //停止正在播放的视频    var videoContextPrev = wx.createVideoContext("myVideo" + that.data._index)    videoContextPrev.seek(0)    videoContextPrev.pause()    setTimeout(function () {      //将点击视频进行播放      var videoContext = wx.createVideoContext('myVideo' + index)      videoContext.play();      that.data._index = index;    }, 100)  },})

3.wcss.myVideo{   width:100%;  height: calc(9 * 750rpx / 16);  background-color: #fff;}.controls{  position:absolute;  z-index:1;   background-color: #fff;      height: calc(9 * 750rpx / 16);   margin-top:-430rpx;}.play{     position:absolute;    left:50%;    margin-top:-300rpx;    margin-left:-80rpx;    }.title{  position:absolute;  white-space: normal;   width:700rpx;   margin-left:15px;   margin-right:30px;  margin-top:-410rpx;}.video{  margin-top:15px;}.avatar {  position:absolute;  display: block;  开通营养膏小程序电话:4006-838-530开通桃子小程序电话:4006-838-530width: 56rpx;  height: 56rpx;  margin-top: 5rpx;  margin-left: 30rpx;  border-radius: 50%;}#name{float: left;  font-size:15px;  margin-left:50px;  margin-top:3px;}

好了,分享完了,赶快去试下吧!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序列表视频控习水县E企盈小程序制播放和设置封面与标题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏