一、案例演示
保留播放暂停、全屏按钮，进度条隐藏掉、手势拖动禁用
代码
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" show-fullscreen-btn="{
{true}}" show-center-play-btn="{
{false}}" show-play-btn="{
{true}}" show-progress="{
{false}}" enable-progress-gesture="{
{ false }}" ></video>
官方文档地址:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html
监听视频是否播放完毕
<video bindended="palyEnd"></video>
<view class="startAnswer">
<!--默认显示图片1-->
<image src="1.png" wx:if="{
{isAnswer == false}}"></image>
<image src="2.png" wx:if="{
{isAnswer == true}}"></image>
</view>
js文件
data:{
isAnswer:false,//默认
}
// 播放完毕
palyEnd(){
console.log("播放结束");
// 显示按钮,这个地方是重点，局部地方会重新渲染
this.setData({
isAnswer: true });
},
二、案例演示（倍速播放）
单纯想让视频固定倍速播放
代码
网址：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.playbackRate.html
onReady: function () {
// 倍速
this.videoContext = wx.createVideoContext('myVideo');
this.videoContext.playbackRate(2);//倍率，支持 0.5/0.8/1.0/1.25/1.5，2.6.3 起支持 2.0 倍速
},
三、案例演示（去除进度条但还想显示视频时长）
去除进度条 就是没有使用controls属性，相对应的时间也就不显示了，目前想让时间显示出来，那这个地方需要自己去获取，并处理，这里用bindtimeupdate="timeUpdate"方法
代码
wxml:
<view class="videoBox">
<video id="myVideo" bindloadedmetadata="videometa" binderror="videoErrorCallback" src="{
{videoUrl}}" show-fullscreen-btn="{
{true}}" show-center-play-btn="{
{false}}" show-play-btn="{
{true}}" show-progress="{
{false}}" enable-progress-gesture="{
{ false }}" bindended="palyEnd" bindtimeupdate="timeUpdate"></video>
<view class="videoTime">
{
{currentTimeShow}}/{
{durationShow}}
</view>
</view>
wxss:
/* 视频模块 */
.videoBox{
position: relative;
}
.videoBox video{
width: 100%;
}
.videoTime{
position: absolute;
right: 12%;
bottom: 36rpx;
color: #fff;
font-size: 20rpx;
}
js
/**
* 页面的初始数据
*/
data: {
durationShow:'00:00',//时间总时长
currentTimeShow:'00:00',//播放总进度时间
},
timeUpdate: function (e) {
console.log(e);
//总时长
let duration = parseInt(e.detail.duration)
//播放进度时间
let currentTime =parseInt(e.detail.currentTime)
//由于获取的都是秒数，需要进行处理，处理成00：00的格式
let m_d = duration >= 60 ? Math.floor(duration / 60) : 0;
let s_d = duration % 60;
let durationShow = (m_d < 10 ? '0' + m_d : m_d) + ':' + (s_d < 10 ? '0' + s_d : s_d);
// 播放时间
let m = currentTime >= 60 ? Math.floor(currentTime / 60) : 0;
let s = currentTime % 60;
let currentTimeShow = (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
this.setData({
currentTimeShow:currentTimeShow,
durationShow:durationShow
})
},
四、案例演示（视频全面显示，去除两侧黑边）
如果视频高度设置了200px，由于视频要完整显示，他的两侧就会出现黑边，那如何让视频不出现黑边，宽度占满呢？
wxml:
<!-- 视频模块 -->
<view class="videoBox">
<video id="myVideo" style="height:{
{
height}}px; width:{
{
width}}px;" src="{
{videoUrl}}" controls bindloadedmetadata="videometa" binderror="videoErrorCallback"></video>
</view>
js:
videometa: function (e) {
var that = this;
//获取系统信息
wx.getSystemInfo({
success(res) {
//视频的高
var height = e.detail.height;
//视频的宽
var width = e.detail.width;
//算出视频的比例
var proportion = height / width;
//res.windowWidth为手机屏幕的宽。
var windowWidth = res.windowWidth;
//算出当前宽度下高度的数值
height = proportion * windowWidth;
that.setData({
height,
width: windowWidth
});
}
})
},