初识flv.js

最新推荐文章于 2024-05-23 21:59:19 发布

不想做咸鱼的王富贵

最新推荐文章于 2024-05-23 21:59:19 发布

阅读量6.4k

点赞数 4

分类专栏： java基础

本文链接：https://blog.csdn.net/weixin_43564627/article/details/105953236

版权

java基础专栏收录该内容

70 篇文章 1 订阅

订阅专栏

初识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>

在这里插入图片描述

不想做咸鱼的王富贵

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
初识flv.js

初识flv.jsflv.js 做了三件事：HTML5 原生仅支持播放 mp4/webm 格式，flv.js 实现了在 HTML5 上播放 FLV 格式视频使 Bilibili 网页端平滑过度到 HTML5 播放器，历史遗留不再是障碍对于视频直播，在 HTML5 上支持了延迟极低 HTTP FLV 播放，解开网页端直播对 Flash 的依赖一.前言在了解flv.js之前，我们先来了解...
复制链接

扫一扫