小程序webview-h5视频全屏播放

Posted 2023-03-18

参考技术A h5作为webview嵌套，小程序或客户端如果涉及全屏，会较为麻烦。
ios播放视频时，一般会默认全屏，阻止全屏反而会麻烦一些。
而安卓单靠h5是没法完成，视频全屏的。
需要客户端支持。

实现video是没法直接点击的，一般用div定位覆盖上去。
图片则是poster的属性可以不用img。
x5为微信h5的一种内核，类似webkit且不要写 playsinline 类似的任何属性。
那个是阻止全屏的 !!!

安卓webview客户端处理参考：
https://blog.csdn.net/weixin_28909745/article/details/117497145

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

一、案例演示

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

代码

 <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
           );
       
   )
,