微信小程序实现简单的视频播放
横屏
竖屏
布局代码：
<!--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