禁止拖拽 video 标签进度条的实现方式

codeniu
2,458 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

需要考虑以下两个平台：

  • 移动端 H5
  • web应用

H5 上的操作比较复杂，需要考虑微信环境，安卓环境以及 ios 环境，在不同的环境中的表现形式不同。

实现思路主要有如下几种：

  1. 自定义控制条
  2. 使用透明遮罩层遮盖进度条
  3. 播放器会被手机自带播放器拦截，所以跟你设置没设置controls 没有多大关系，爱奇艺、乐视等是让进度条滑动后恢复到原来播放位置，即拖到进度条后无效！
  4. 定时器
  5. 全屏时禁用控制条

定时器

定时器方式

// 禁止拖动进度条
const timer = setInterval(function() {
   const currentTime = video.currentTime
   // console.log(currentTime, originTime)
  if (currentTime - originTime > 1) {
     video.currentTime = originTime
  }
  originTime = currentTime
}, 500)

移动端视频播放特性

内联播放

内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。

webkit-playsinline 和 playsinline

在手机浏览器和QQ等App中播放H5视频，系统会自动接管进行全屏播放。显然，在很多场景中，我们需要在H5的页面中进行播放，则需要加上webkit-playsinline，在iOS10之后需要加上playsinline。所以，建议同时加上这两个属性。

<video id="video"
  style="object-fit:fill"
  preload="auto"
  webkit-playsinline="true" 
  playsinline 
></video>


腾讯x5内核

android的微信。它使用的是腾讯x5内核，不遵循X5web标准，会强制全屏。

<video id="video"
  style="object-fit:fill"
  preload="auto"

  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"
></video>
  • x5-video-player-type="h5" 启用 Ｈ5 同层播放器,也就内联播放。
  • x5-video-player-fullscreen="true" 视频播放时将会进入到全屏模式。
  • x5-video-player-fullscreen="portraint" 声明播放器支持的方向，此属性只在声明了x5-video-player-type="h5" 情况下生效。可选值： landscape 横屏，portrain竖屏； 默认portrain，跟随手机旋转，"landscape|portrait"

iPhone 中全屏播放

使用 iPhone 自带浏览器播放视频时，分别有三种状态：

  1. 在文档流中播放
  2. 页内全屏播放
  3. 全屏播放

文档流中播放，如图：

image.png

页内全屏，如图

其中全屏播放时，由系统内的播放器接管。作用到播放器上的 CSS 代码将不起作用，通过css禁止用于触摸控制条这种方式将不起作用。

禁用全屏按钮

ios 端 微信内置浏览器 设置自动播放视频：

document.addEventListener('WeixinJSBridgeReady',function(){
  video.play();
},false);
avatar
文章
阅读
粉丝