乐趣区

NutUI-视频组件开发心得

jiezi

引子

说到在项目中引入一个视频，我们肯定会想到 HTML5 为我们提供的 Video 标签，它为我们提供了许多属性和方法，使用起来很方便，当然直接使用也会遇到各种兼容问题，在最初学习 Video 标签时，W3C 官网就给出了这样的温馨提示：

在 HTML 中播放视频并不容易！

您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

这份提示在之后接触了一系列视频项目后，才明白这“不容易”指的是什么，在移动端，我们需要深谙的“大量技巧”却还远远不够 ……

背景

NutUI 是一套京东风格的移动端组件库，开发和服务于移动 Web 界面的企业级前中后台产品。现拥有 50+ 个高质量组件，GitHub 上已获得 1.9k 的 star，NPM 下载量超过 14k。公司内部已赋能支持 50+ 个项目，外部接入使用项目达到 20+ 个。感兴趣的同学，快来扫码体验吧！

言归正传，距离 NutUI v2.2.2 版本 Video 视频组件发布已有一段时间了，在 NutUI 交流群和 GitHub 上我们也收到了一些用户反馈，在这里想跟大家聊聊 NutUI Video 组件的开发、使用以及遇到的问题和解决方案。

首先，开发 Vue 视频组件这个想法是源于一个移动端的项目。项目需求相对简单，使用的是 Vue 技术栈，只有一个视频需要点击播放，所以在最初选择实现视频播放的时候没有考虑要引入第三方的插件。而在项目开发之初调研 Vue 的 Video 视频组件时，发现 NutUI 组件库还没有视频组件，这怎么能忍呢？于是乎 NutUI Video 组件就这么诞生了！

<img src=”https://img13.360buyimg.com/imagetools/jfs/t1/137215/29/315/260090/5ecba5edE5b153866/40b6fa668e2c5021.png” width=”375″>

前期准备

在开发之前，我们先来再次认识下 video 标签。相信初识 <video> 标签时，很多人都是先掌握了使用方法，比如在页面中添加一个 Video 标签，再加一个视频地址：

<video controls width="250">
    <source src="videoname.webm" type="video/webm">
    <source src="videoname.mp4" type="video/mp4">
   您的浏览器不支持 video 标签。</video>

当视频能在页面中能顺利播放之后，才开始关注它的属性和参数的使用：

<video src="videofile.ogg" autoplay muted poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频
</video>

比如上述代码中对视频的播放地址 src、自动播放属性 autoplay、静音属性 muted 和海报设置属性 poster 进行了设置。

除了基本的可选属性，Video 标签还支持 HTML 中的全局属性和事件属性。

当我们在 HTML 中创建了一个视频后，就可以拿到 Video 标签的对象属性和对象方法，比如

  • currentTime 视频当前播放位置（即当前播放时间，以秒计）
  • duration 视频的长度（整个视频的播放长度，以秒计）
  • ended 视频是否播放结束
  • volume 视频的播放音量等对象属性
  • ……

还有一些对象方法：

  • canPlayType() 检查浏览器是否能够播放指定的视频类型
  • load() 重新加载视频元素
  • play() 开始播放视频
  • pause() 暂停当前播放的视频等这些对象方法。

感兴趣的同学可以查阅 W3C 等相关文档中，这里就不一一赘述了。

功能实现

通过对 Video 标签的重温，在 Vue 中要实现视频的播放（仅指播放）可以说很简单，但要想“通关”移动端所有的“隐藏关卡”，那可以说是不可能完成的任务。因为即使流传度很广的 Video.js、Vue-video-player 也存在很多待解决的问题，我们只能具体问题具体分析。所以在实现 NutUI Video 组件这件事上，我们分为两个阶段：

<img src=”https://img13.360buyimg.com/imagetools/jfs/t1/122919/40/3719/55708/5ed4cca4E0b740d4f/cf4f097b7ad6eefb.png” >

第一阶段是基础的实现，完成视频播放的基本功能。第二阶段是进阶版的自定义控制栏的实现，完成播放、暂停、控制条等操作项的自定义开发。

基础实现

1、属性的实现

对于属性的实现，最开始想用一一对应将属性绑定后抛给用户使用，用户操作的就是 video 标签的原生属性。但考虑到后期自定义控制栏的迭代，这种方法可能不利于管理，于是我们还是将 Video 的操作属性用 options 对象统一管理，而视频源则用 source 属性管理，用集合形式管理视频源信息，可支持多种格式的视频源的配置，以便解决不同设备视频格式的兼容问题：

<video ref="video" class="nut-videoplayer"       
        :muted="options.muted" 
        :autoplay="options.autoplay"
        :loop="options.loop" 
        :poster="options.poster"   
        :controls="options.controls"
        :preload="options.preload" 
        >
        <source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" />
</video>

到了这一步用户调用组件，配置好参数就能正常播放视频了：

<nut-video :sources="sources" :options="options"></nut-video>
 data() {
    return {sources: [{ src: 'video.mp4', type: 'video/mp4'}],
        options: {
            controls: true,
            autoplay: true,
            volume: 0.6,
            poster: ''
        },
    }
}

效果演示

<img src=”https://img13.360buyimg.com/imagetools/jfs/t1/132345/29/412/1926866/5ecce9cfE90bad75f/d6b52fd82faa5f2e.gif” width=”375″>

2、自定义属性

除了 Video 的基本属性，在基础版组件中我们也为用户抛出了一些个性化的属性设置如：disabled 禁止操作，playsinline 行内展示等。

options: {autoplay: true, muted: true,disabled: true, playsinline: true, loop: true,controls: false}

上述配置项规定了一个行内自动播放的背景图视频的例子，需要注意的是禁用操作目前只对自动播放时有效，在自动播放中用户不可操作播放器，点击播放器无效。而行内展示 playsinline 属性，目前只有 IOS 端和个别安卓设备能兼容，要想完全实现行内播放还是要具体问题具体分析。

效果演示：

<img src=”https://img10.360buyimg.com/imagetools/jfs/t1/126007/35/3874/4135457/5ed79abcEbec47957/98b53f4a7ce24348.gif” width=”375″>

3、事件的实现

在事件实现这方面，视频最重要的操作无非是播放、暂停、播放结束这三个事件，还有 error 事件，在报错时提示错误信息。

<img src=”https://img10.360buyimg.com/imagetools/jfs/t1/114052/39/8081/22800/5ecbb4fbE812424e0/a3652cf56556e619.jpg” width=”375″>

当我们使用 video 的原生控制栏时，要想实现播放、暂停和播放结束，主要就靠监听 video 的播放事件了。

// 监听播放
this.videoElm.addEventListener('play', () => {
        this.state.playing = true;
        this.$emit('play', this.videoElm);
});
// 监听暂停
this.videoElm.addEventListener('pause', () => {
        this.state.playing = false;
        this.$emit('pause', this.videoElm);
});
// 监听播放结束
this.videoElm.addEventListener('ended',this.playEnded);

用户调用方法如下 

<nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend">
</nut-video>
methods: {play(elm) {console.log('play', elm);},
    pause(e) {console.log('pause');},
    playend(e) {alert('播放结束');},
}

效果演示：

<img src=”https://img13.360buyimg.com/imagetools/jfs/t1/115345/21/8225/4585974/5eccf7e1E4fd0a058/715366ca201c3430.gif” >

从视频中可以看到，当我点击播放、暂停和播放结束时会触发回调事件，当视频播放结束后会提示播放结束。

进阶版实现 – 自定义控件的实现

如果说基础版是依赖原生 Video 的控制栏，那么自定义控件的实现就是掌握播放自主权的进阶版。因为 Video 标签在不同设备上都会有不同的默认设定，我们很难控制它们，所以自定义一套自己的视频播放控件，可以一定程度上避免原生控件被默认修改的问题。下面，我们来看看它的实现。

1、控制条的重构

关于重构控制条我们可以先来看张图，分析下自定义控制条需要的元素。

<img src=”https://img14.360buyimg.com/imagetools/jfs/t1/112141/37/9247/178449/5ed76149Ee7463708/ebee028a84b3b261.png” >

上图标注了控制栏需要的元素：

  • 播放按钮
  • 当前播放时间
  • 总体时间
  • 播放控制条
  • 缓冲时间条
  • 可拖动播放按钮
  • 静音控制按钮
  • 全屏控制按钮

按照上述控制栏的元素进行重构即可，这里就不多做赘，直接上代码。

<div class="nut-video-controller" >
      <div class="control-play-btn" @click="play"></div> <!-- 播放暂停 -->
      <div class="current-time">01:30</div> <!-- 当前播放时间 -->
      <div class="progress-container"> <!-- 播放控制条 -->
        <div class="progress" ref="progressBar"> <!-- 总体播放时间条 -->
          <div class="buffered" ></div> <!-- 缓冲时间条 -->
          <div class="video-ball" <!-- 可拖动播放按钮 -->
            @touchmove.stop.prevent="touchSlidMove($event)"
            @touchstart.stop="touchSlidSrart($event)"
            @touchend.stop="touchSlidEnd($event)">
            <div class="move-handle"></div>
          </div>
          <div class="played" ref="playedBar"></div>
        </div>
      </div>
      <div class="duration-time">03:30</div> <!-- 总体时间 -->
      <div class="volume" @click="handleMuted"></div> <!-- 静音按钮 -->
      <div class="fullscreen-icon" @click="fullScreen"></div> <!-- 全屏按钮 -->
</div>

2、初始化配置

在控制栏元素重构完成后，我们需要先获取到 Video 元素、自定义控制条元素以及用户配置的属性的初始状态。

  • 获取 Video 标签 
this.videoElm = this.$el.getElementsByTagName('video')[0];

这里我们拿到了 video 标签，这一步非常重要，因为之后所有的操作都是基于它而成行的。

  • 获取自定义控制条位置 
const $player = this.$el;
const $progress = this.$el.getElementsByClassName('progress')[0];
// 播放器位置
this.player.$player = $player;
this.progressBar.progressElm = $progress;
this.progressBar.pos = $progress.getBoundingClientRect();
this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);

代码中我们获取到刚才重构的控制条 progressBar 并对它的位置和宽做了定义。

  • 初始化属性配置

初始化是将用户设置的属性参数绑定到 video 上，比如自动播放设置时要触发播放事件，行内播放设置时要在 video 上绑上兼容属性等等。

// 自动播放
if (this.options.autoplay) {this.videoElm.play();
}
// 行内播放
if (this.options.playsinline) {this.videoElm.setAttribute('playsinline', this.options.playsinline);
     this.videoElm.setAttribute('webkit-playsinline', this.options.playsinline);
     this.videoElm.setAttribute('x5-playsinline', this.options.playsinline);
     this.videoElm.setAttribute('x5-video-player-type', 'h5');
     this.videoElm.setAttribute('x5-video-player-fullscreen', false);
}

3、播放与暂停

视频的播放与暂停的在自定义控制栏中我们统一用 play() 事件控制，在界面渲染上用 data 中的 state.playing 控制。

play() {   
    this.state.playing = !this.state.playing;
    if (this.videoElm) {
        // 播放状态
        if (this.state.playing) {
            try {this.videoElm.play();
                // 监听缓存进度
                this.videoElm.addEventListener('progress', e => {this.getLoadTime();});
                // 监听播放进度
                this.videoElm.addEventListener('timeupdate', throttle(this.getPlayTime, 100, 1));
                // 监听结束
                this.videoElm.addEventListener('ended', this.playEnded);
                this.$emit('play', this.videoElm);
            } catch (e) {this.handleError()
            }
        }
        // 停止状态
        else {this.videoElm.pause();
            this.$emit('pause', this.videoElm);
        }
    }
},

当视频处于播放状态时触发 video.play()，我们会对缓存进度、播放进度和播放结束的状态进行监听。当视频是暂停状态时，会触发 video.pause() 暂停事件。

4、音量控制

视频的音量控制就是在获取到页面中的 Video 元素后，设置它的 volume，方法如下。

volumeHandle() {this.videoElm.volume = this.state.vol ;}

5、播放时间的获取

播放时间的获取是根据 video 的 duration 和 currentTime 来的。

// 获取播放时间
    getPlayTime() {
      const percent = this.videoElm.currentTime / this.videoElm.duration;
      this.videoSet.progress.current = Math.round(this.videoSet.progress.width * percent);

      // 赋值时长
      this.videoSet.totalTime = this.timeFormat(this.videoElm.duration);
      this.videoSet.displayTime = this.timeFormat(this.videoElm.currentTime);
    },

6、进度条拖动控制

说到进度条，通过上边分析的控制栏布局，我们知道它有一个可拖动的按钮，这里我们对它的 touchmove 和 touchend 事件做处理。

// 拖动播放进度
touchSlidMove(e) {let currentX = e.targetTouches[0].pageX;
    let offsetX = currentX - this.progressBar.pos.left;
    // 边界检测
    if (offsetX <= 0) {offsetX = 0;}
    if (offsetX >= this.videoSet.progress.width) {offsetX = this.videoSet.progress.width;}
    this.videoSet.progress.current = offsetX;
    let percent = this.videoSet.progress.current / this.videoSet.progress.width;
    this.videoElm.duration && this.setPlayTime(percent, this.videoElm.duration);

},
touchSlidEnd(e) {let currentX = e.changedTouches[0].pageX;
    let offsetX = currentX - this.progressBar.pos.left;
    this.videoSet.progress.current = offsetX;
    let percent = offsetX / this.videoSet.progress.width;
    this.videoElm.duration && this.setPlayTime(percent, this.videoElm.duration);
},
// 设置手动播放时间
setPlayTime(percent, totalTime) {this.videoElm.currentTime = Math.floor(percent * totalTime);
},

在拖动开始时获取控制条的左侧位置，并实时监听偏移量，将偏移量的值赋给 this.videoSet.progress.width 播放控制条的长度，并用百分比转化成时间，重置当前视频播放的时间。

7、全屏控制

全屏和退出全屏我们用 data 中 state.fullScreen 来控制它的按钮状态，默认是 false 表示不全屏，当用户点击全屏按钮时，将其置成 true 并调用进入全屏事件 element.webkitRequestFullScreen()，再次点击时调用 document.webkitCancelFullScreen() 退出全屏，并把 state.fullScreen 置成 false 来改变按钮图标的样式。

fullScreen() {if (!this.state.fullScreen) {
        this.state.fullScreen = true;
        this.videoElm.webkitRequestFullScreen();} else {
        this.state.fullScreen = false;
        document.webkitCancelFullScreen();}
}

自定义控制条演示效果：

<img src=”https://img12.360buyimg.com/imagetools/jfs/t1/130635/8/1456/2512349/5ed8f786Ee65c33cb/24644093a66d3fa1.gif” width=”375″>

以上是自定义控制栏的实现，当然还有其他功能待开发，之后会根据业务和用户的反馈不断的进行完善。

问题 & 解决方案

组件开发完了之后，终于可以在项目中跑起来了，但是随之而来的问题也接连出现了。这里为大家总结了下我们在项目中遇到问题和解决方案。

自动播放问题

在移动端 Video 的自动播放问题相信一定有许多人都遇到过，在 Video 标签上加上 autoplay 后 PC 浏览器测试的很好，在手机端测试就失效，这是因为 autoplay 的兼容问题。造成这些问题的原因可能有：

  • 浏览器不支持该视频格式，建议可以使用 MP4、WebM、Ogg 这三种视频格式
  • 出于用户体验，节省流量的考虑，移动端禁止自动播放
  • 视频文件太大，加载时间过长或错误

如果一定要做自动播放的功能的话，可以参照如下方案：

1、检查视频格式是否正确，尽量转成 MP4，压缩大小到 2M 以下

2、IOS 设备中 autoplay 失效，可以加上静音属性 muted：

<video autoplay muted></video>

3、在用户有交互操作后进行模拟播放。

let video = document.getElementById("video");
    video.play();
  • 这里需要注意的是必须要等用户有操作后才能执行模拟播放，否则会有报错。
  • 安卓机加载完成后进行模拟播放是无效的，用户必须要有交互操作后才能生效，比如点击、触摸、滑动屏幕等 
document.removeEventListener('touchstart', this.playVideo);

4、如果是微信中自动播放失效，可以考虑安装微信的 JSSDK，通过监听 WeixinJSBridgeReady，来控制自动播放，具体操作如下：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

document.addEventListener("WeixinJSBridgeReady", function () {document.getElementById('video').play();}, false);

5、如果安卓机还是无法做到自动播放，可以考虑降级处理，展示控制条引导用户点击播放按钮播放。

全屏播放问题

全屏播放视频时，我们可能会遇到屏幕没有被占满，上下会有黑白边的情况，此时可以添加 style= "object-fit: fill;width:100%;height:100%;"，控制视频撑满屏幕。

行内播放

视频行内播放，也就是视频在页面局部的内嵌播放，像文档流一样在它在的位置播放。但在移动端下，Video 视频播放是默认全屏的，那要禁用全屏要如何实现呢？

1、IOS 设备可以在 Video 标签上设置 playsinline 属性，兼容写法如下：

<video muted src="video.mp4" autoplay 
    webkit-playsinline 
    playsinline
    x5-playsinline>
</video>

以上写法在 IOS 中基本可以解决行内播放的问题，x5-playsinline 可以让部分安卓机也兼容，但添加该属性后不能再有 x5-video-player-type='h5' 和 x5-video-player-fullscreen='true'，否则还会默认全屏。

2、Canvas 模拟视频播放

安卓设备上行内播放如果上述解决方案不能满足，可以试试用 canvas 模拟视频播放，将 video 标签在页面中隐藏，通过监听播放、暂停以及播放结束事件，将视频在 canvas 中绘画出来。

initCanvas() {
    // 获取 video
    let TestVideo = document.getElementById('videoPlay');
    let videoW = TestVideo.offsetWidth;
    let videoH = TestVideo.offsetHeight;
    // 获取 canvas 画布
     let TestCanvas = document.getElementById('videoCanvas');
     // 设置画布
     let TestCanvas2D = TestCanvas.getContext('2d');
     // 设置 setinterval 定时器
     let TestVideoTimer = null;
     // 监听播放
     TestVideo.addEventListener('play', function() {TestVideoTimer = setInterval(function() {TestCanvas2D.drawImage(TestVideo,0,0,320,180);
         }, 20);
     }, false);
    // 监听暂停
     TestVideo.addEventListener('pause',function() {clearInterval(TestVideoTimer);
     }, false);
     // 监听结束
     TestVideo.addEventListener('ended', function() {clearInterval(TestVideoTimer);
    }, false);

 }

用 canvas 模拟视频虽然可以实现行内展示，但效果不是很理想，视频播放的清晰度不高，会有卡顿问题，也可能我在试验这个方法的时候用的视频源是被压缩过的原因，画质很差，移动端控制画布大小会有一点问题，感兴趣的同学可以尝试下用 canvas 模拟视频播放。

issue 问题

发版之后我们也陆陆续续收到一些 issue 反馈，针对这些问题我们也进行了逐一排查和修复。

issue 问题如下：

<img src=”https://img12.360buyimg.com/imagetools/jfs/t1/135235/39/1416/12296/5ed8f8e8E2b8b2fa9/b5f3b14cd434e3b5.png” >

1、video 组件运行控制台会报错

这个问题是因为开发自定义控件时，代码遗留未注释掉引起的，新版发布已修复该问题。

2、视频源异步切换

在基础版发布之后，NutUI 交流群里有反馈当异步切换视频源时，视频播放不了。那是因为视频地址切换时没有被监听到，在组件中加上监听事件从新加载一下就可以解决。

方法优化如下：

 watch: {
    sources: {handler(newValue, oldValue) {if (newValue && oldValue && newValue != oldValue) {this.$nextTick(() => {this.videoElm.load()
                })
            }
        },
        immediate: true
    },
    
},

该方法已经跟随新版本上线了，大家可以更新版本后体验一下。

感谢大家的反馈，也希望大家能多提宝贵意见，帮助我们一起捉虫，让这个视频组件能够走得远一点。

总结

Video 视频组件初版虽然已经发布，但功能也仅是基于原生 Video 标签的封装，面对移动端复杂的兼容问题，它还需要不断地打磨。对自定义控制栏的开发目前还处于试验阶段，希望在不远的将来会有一套兼容原生和自定义的 Video 组件与大家见面。如果大家对 NutUI Video 开发有什么好的建议，也欢迎留言参与 NutUI Video 的开发与设计！移动端 Video 组件的开发之路，道阻且长，我们一步一步来~

退出移动版