NutUI 视频组件开发心得

微信扫一扫,分享到朋友圈

NutUI 视频组件开发心得

引子

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

您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(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="https://www.tuicool.com/articles/NfQjUnB/videoname.webm" type="video/webm">
<source src="https://www.tuicool.com/articles/NfQjUnB/videoname.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>

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

<video src="https://www.tuicool.com/articles/NfQjUnB/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"
: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="https://www.tuicool.com/articles/NfQjUnB/source.src" :type="source.type" :key="https://www.tuicool.com/articles/NfQjUnB/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 >
<div @click="play"></div> <!-- 播放暂停 -->
<div>01:30</div> <!-- 当前播放时间 -->
<div> <!-- 播放控制条 -->
<div ref="progressBar"> <!-- 总体播放时间条 -->
<div ></div> <!-- 缓冲时间条 -->
<div <!-- 可拖动播放按钮 -->
@touchmove.stop.prevent="touchSlidMove($event)"
@touchstart.stop="touchSlidSrart($event)"
@touchend.stop="touchSlidEnd($event)">
<div></div>
</div>
<div ref="playedBar"></div>
</div>
</div>
<div>03:30</div> <!-- 总体时间 -->
<div @click="handleMuted"></div> <!-- 静音按钮 -->
<div @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、播放时间的获取

播放时间的获取是根据 videodurationcurrentTime 来的。

// 获取播放时间
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、进度条拖动控制

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

// 拖动播放进度
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、全屏控制

全屏和退出全屏我们用 datastate.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="https://www.tuicool.com/articles/NfQjUnB/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 组件的开发之路,道阻且长,我们一步一步来~

Redmi K30 极速版 5G 手机京东限时直降 200 元

上一篇

HTC新机曝光:挖孔设计 骁龙665加持

下一篇

你也可能喜欢

NutUI 视频组件开发心得

长按储存图像,分享给朋友