初识flv.js(上)

一.前言

在了解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封装一个视频组件