初识flv.js
程序员文章站
2022-07-13 12:07:39
...
初识flv.js
flv.js 做了三件事：
- HTML5 原生仅支持播放 mp4/webm 格式，flv.js 实现了在 HTML5 上播放 FLV 格式视频
- 使 Bilibili 网页端平滑过度到 HTML5 播放器，历史遗留不再是障碍
- 对于视频直播，在 HTML5 上支持了延迟极低 HTTP FLV 播放，解开网页端直播对 Flash 的依赖
一.前言
在了解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.）操作
flv.js 官网: https://www.bootcdn.cn/flv.js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flv.js教程</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://fed.dev.hzmantu.com/oa-project/bce0c613e364122715270faef1874251.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</html>
下一篇： 调用flv.js显示监控视频遇到的问题