初识flv.js(上)

一.前言

在了解flv.js之前，我们先来了解关于视频和音频的一些基本用法。h5中给我们友好的API video、audio。其中，在我们创建这个多媒体节点的时候，我们可以设置它的属性，做出自己想要的控制样式等
1.）创建

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)：

播放
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
应用：

image.png