video标签自定义控件适配安卓IOS

引文

众所周知，video标签在安卓和IOS系统表现差异较大，自身所带控件有许多是我们不需要的，并且video控件样式较为丑陋，所以我的做法是摒弃了video自身的控件，自己去实现所需功能和样式。

常用属性

常用事件

常用方法

video

要实现自定义video控件，所以对video的基础属性进行配置就可以了

<video
  ref="player"
  :src="url%20+%20'#t=0.01'"
  :muted="muted"
  :autoplay="autoplay"
  preload="auto"
  @timeupdate="getPercentage"
  @ended="endedHandle"
>
  您的浏览器不支持 video 标签。
</video>

控件

常用控件：播放、暂停、时间、进度条、倍速、全屏。

// 播放
this.$refs.player.play();

// 暂停
this.$refs.player.pause();

// 时间：video当前时间和总时间 （都是以秒计）
this.$refs.player.currentTime // 当前时间
this.$refs.player.duration // 总时间

// 进度: 当前时间和总时间的比值
(this.$refs.player.currentTime / this.$refs.player.duration) * 100

// 倍速
this.$refs.player.playbackRate // 获取和设置video倍速

// 全屏：我的需求是横向全屏、下面会讲我的全屏方法

遇到的问题

1、video默认播放

问题：autoplay设置为true，但是不自动播放

解决办法：video标签加上muted 设置静音就可以自动播放，如果还不能播放就调用下play()方法

2、ios没有默认加载第一帧

问题：设置video的preload属性后，一旦页面加载，则开始加载音频/视频，但是ios没有加载出video的第一帧，如果也没有设置poster，那就会出现黑屏的情况。

解决办法： :src=”url%20+%20’#t=0.01′” 在src属性后增加t参数，他的意义是当前视频时间是0.01秒

3、自定义进度条拖拽引起回弹

问题：进度条拖拽引起系统回弹效果

解决方法：进度条本身touchmove事件 e.preventDefault();

body阻止默认事件document.body.addEventListener(‘touchmove’,(e) =>e.preventDefault(),{ passive: false });

4、ios获取播放时间播放失败

问题：全屏时全屏video获取列表video的播放时间播放，但是获取失败从头播放。

解决办法： ios监听video的canplay事件，在事件监听函数中获取列表video的播放时间。

video全屏

我的做法是将元素宽高修改并旋转，适应横屏，简单粗暴。

this.$nextTick(() => {
    let player = document.getElementById('fullWrapper'),
      w = document.documentElement.clientWidth || document.body.clientWidth,
      h = document.documentElement.clientHeight || document.body.clientHeigth,
      cha = Math.abs(h - w) / 2;
      
    player.style.width = h + 'px';
    player.style.height = w + 'px';
    player.style.transform = 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)';

    // 设置全屏播放器播放时间和属性
    this.$refs.fullPlayer.setCurrentTime(currentPlayer.player.currentTime);
  });

效果截屏

竖屏播放

横屏播放

结语

我的实现方法比较简单，没有用其他的插件，本篇文章主要分享使用原生video标签遇到的问题，像使用video原生控件修改样式等其他方法我也有尝试过，但是在俩个系统表现还是有差异，终于放弃了使用它自身的控件，读到这里假设你有更好的解决方案和插件，请分享和交流一下吧。