微信小程序（原生）——video视频禁止拖动进度条可全屏观看等视频播放结束事件数据监听显示播放时长固定倍速视频去除黑边等

Posted 2023-04-08 耶啵奶膘

一、案例演示

保留播放暂停、全屏按钮，进度条隐藏掉、手势拖动禁用

代码

 <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:heightpx; width:widthpx;"  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
           );
       
   )
,

Javascript实现Video视频进度条拖动无效

在某些时候项目中会用到video，想让用户看完视频而不是一下拖到底结束，这种时候就要实现进度条拖动失效，用户拖动时会记录拖动上一秒的currentTime，在拖动结束后返回上一秒的位置，以此实现拖动失效效果，代码如下

html

        <video controls="controls" src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" ></video>

js

        var video = document.querySelector('video');

        var old = 0;
        video.ontimeupdate = function()
            var cuTime = video.currentTime;
            if (cuTime - old > 2)
              video.currentTime = old;
             else
              old = cuTime;