一.前言
在了解flv.js之前，我们先来了解关于视频和音频的一些基本用法。h5中给我们友好的API video、audio。其中，在我们创建这个多媒体节点的时候，我们可以设置它的属性，做出自己想要的控制样式等
1.）创建
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
2.）以下列出原生video常用的一些属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| poster | url | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| src | url | 要播放视频的地址 |
3.)支持全局属性、事件属性
以下列举一些常用的全局属性：
| 目标 | 值 |
|---|---|
| 获取视频时长 | videoDOM.duration |
| 获取当前播放时间 | videoDOM.currentTime |
| 设置当前播放位置 | videoDOM.currentTime |
以下列举一些常用的事件属性：
在我们不需要controls属性的时候，往往需要手动js去控制它的播放情况，这是就需要用到事件属性
| 属性 | 值 | 描述 |
|---|---|---|
| onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
| onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
| ondurationchange | script | 当媒介长度改变时运行的脚本。 |
例(ps:环境vue)：
<video :src="url" ref="video"></video>
<button @click="play">播放</button>
let videoDOM = this.$refs.video
console.log(videoDOM.duration) // 获取视频时长
video.currentTime = 0 // 设置当前播放位置
// [play 播放视频]
play () {
this.videoDOM.play()
}
简单的说下video,接下来我们将正式介绍flv.js
二.flv.js
什么是flv.js?它是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash，由 bilibili 网站开源。
对于flv.js，很多人都说很好，但是我发现很难去查找到相关细致的说明文档。只好看下源码啦
1.）了解flv.js
HTML5 原生仅支持播放 mp4/webm 格式，flv.js 实现了在 HTML5 上播放 FLV 格式视频
2.）操作
安装：npm install --save flv.js
打包：
npm install
npm install -g gulp
gulp release
应用：
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'xxx.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
image.png
下期，利用flv.js封装一个视频组件
