小程序点击图片全屏播放视频

最新推荐文章于 2024-07-22 11:14:13 发布

m0_49170282

最新推荐文章于 2024-07-22 11:14:13 发布

阅读量713

点赞数

文章标签：小程序

原文链接：https://blog.csdn.net/hql1024/article/details/104692027

版权

先赋值liveList，然后定义data-id="{{index}}"

 <view class="liveTv" wx:for='{{liveList}}' wx:key="index">
      <image class="liveImg" data-id="{{index}}" data-img_url="{{item.img_url}}"  bindtap="gotoTv" mode="widthFix"  src="{{item.img_url}}"></image>
  </view>
  <video src="{{videoLink}}" direction="0" controls="true" id="videoId" bindfullscreenchange="leaveVideo" class='videoCenter'></video>

data:{
    liveList: [],
    videoLink: null,  
}
gotoTv(e){
    var that = this
    console.log(e.currentTarget.dataset.id)
    console.log(this.data.liveList[e.currentTarget.dataset.id].post_source)	//打印视频连接
    this.setData({
      videoLink: this.data.liveList[e.currentTarget.dataset.id].post_source	//获取视频连接
    })
    console.log(this.data)
    this.videoContext.requestFullScreen()
    setTimeout(function() {
      that.videoContext.play()
    }, 500)
},
 leaveVideo: function() {
   this.videoContext.pause()
   this.setData({
     videoLink: null
   })
 },
  onReady: function() {
    this.videoContext = wx.createVideoContext('videoId')
  },