1. Case demonstration
Keep playback pause, full screen button, progress bar hidden, gesture drag disabled
the code
<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>
Official document address:
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
Monitor whether the video has finished playing
<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 file
data:{
isAnswer:false,//默认
}
// 播放完毕
palyEnd(){
console.log("播放结束");
// 显示按钮,这个地方是重点，局部地方会重新渲染
this.setData({
isAnswer: true });
},
2. Case demonstration (double speed playback)
I just want the video to play at a fixed speed
the code
URL: 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 倍速
},
3. Case demonstration (remove the progress bar but still want to display the video duration)
Removing the progress bar means that the controls attribute is not used, and the corresponding time will not be displayed. At present, if you want to display the time, you need to obtain and process this place yourself. Here is the bindtimeupdate="timeUpdate"method
the code
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
})
},
4. Case demonstration (the video is fully displayed, and the black borders on both sides are removed)
If the height of the video is set to 200px, black borders will appear on both sides of the video because the video needs to be fully displayed, so how to prevent the video from appearing black borders and occupying the full width?
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
});
}
})
},