微信小程序实现简单的视频播放

横屏

竖屏

布局代码：

<!--pages/live/live.wxml   src="{{channels[currentIndex].playUrl}}"-->
<!--视频播放器，属性设置参考：https://developers.weixin.qq.com/miniprogram/dev/component/video.html-->
<view>
	<video show-mute-btn="{{true}}" 
	src="{{channels[currentIndex].playUrl}}"
	picture-in-picture-mode="{{['push', 'pop']}}" show-progress="{{false}}" autoplay="{{true}}" show-casting-button="{{true}}" show-fullscreen-btn="{{true}}" show-screen-lock-button="{{true}}" enable-auto-rotation="{{true}}" enable-progress-gesture="{{false}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture' bindfullscreenchange="screenChange"></video>

	<image src="{{arrowImg}}" style="right:{{showChannels?130:0}}px" bindtap="onArrowClick" class="arrow"></image>

	<!--频道列表，全屏时video层级最高，显示不了其他组件，所以全屏时暂不能显示频道列表-->
	<view class="channel_root">
		<scroll-view scroll-y="{{true}}" class="channel_scroll" style="display:{{showChannels?'block':'none'}};">
			<view bindtap="onChannelClick" data-position="{{index}}" wx:for="{{channels}}">
				<view class="channel_item {{index === currentIndex?'active_item':''}}"><text>{{item.title}}</text></view>
			</view>
		</scroll-view>
	</view>
</view>

js代码：

// pages/live/live.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:0,
    channels:[{"imgUrl":"http://125.210.122.251:8080/IP/uploadChannelImg/542.png","title":"中央十套","playUrl":"http://cctvcnch5c.v.wscdns.com/live/cctv10_2/index.m3u8"},{"imgUrl":"http://125.210.122.251:8080/IP/uploadChannelImg/542.png","title":"中央十二套","playUrl":"http://cctvcnch5c.v.wscdns.com/live/cctv12_2/index.m3u8"},{"imgUrl":"http://125.210.122.251:8080/IP/uploadChannelImg/542.png","title":"中央十套","playUrl":"http://cctvcnch5c.v.wscdns.com/live/cctv10_2/index.m3u8"},{"imgUrl":"http://125.210.122.251:8080/IP/uploadChannelImg/542.png","title":"中央十二套","playUrl":"http://cctvcnch5c.v.wscdns.com/live/cctv12_2/index.m3u8"},{"imgUrl":"http://125.210.122.251:8080/IP/uploadChannelImg/542.png","title":"中央十套","playUrl":"http://cctvcnch5c.v.wscdns.com/live/cctv10_2/index.m3u8"}],
    showChannels:true,
    arrowImg:"img/ic_arrow_right.png"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  onChannelClick(e){
    if(e.currentTarget.dataset.position == this.data.currentIndex){
      return
    }
    this.setData({
      currentIndex:e.currentTarget.dataset.position
    })
    console.log(e)
  },
  
  onArrowClick(e){
    if(this.data.showChannels){
      this.setData({
        showChannels:false,
        arrowImg:"img/ic_arrow_left.png"
      })
    } else {
      this.setData({
        showChannels:true,
        arrowImg:"img/ic_arrow_right.png"
      })
    }
  },
  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  screenChange(res){
    console.log("screenChange->res:" + JSON.stringify(res))

  }
})

样式文件代码：

/* pages/live/live.wxss */
.channels {
  background: argb(255, 255, 255, 112);
}

video {
  width: 100%;
}

.channel_root {
  display: flex;
  flex-direction: row;
  z-index: 2;
  height: 225px;
  position: absolute;
  right: 0px;
  top: 0px;
  float: right;
}

.arrow {
  width: 20px;
  height: 30px;
  margin-top: 130rpx;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  z-index: 2;
}

.channel_root>.channel_scroll {
  background: rgba(255, 255, 255, 0.5);
  width: 130px;
  height: 225px;
}

.channel_item {
  margin-left: 15rpx;
  margin-top: 15rpx
}
.active_item{
  color: #ff0000;
}

json文件代码(不添加{}会报xpecting ‘STRING’,‘NUMBER’,‘NULL’,‘TRUE’,‘FALSE’,’{’,’[’, got EOF错误)：

{}

左右箭头图片：

项目地址：https://gitee.com/load_star/wechatfuncs