流媒体之播放flv格式的视频

起因

项目之前支持高清预览，但是不支持flv格式的视频。所以，为了让他支持flv格式，我去整理了一些相关资料，发现，有两种方式，一个是采用插件，一个是使用b站开源的flv.js。详情见下：

flv.js简介

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

概览：
一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。
功能：

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速

flv用法

话不多说，直接上demo,
demo1：这个是通过videojs和flv.js结合使用的，可以支持mp4，还有flv等多种格式。demo的核心在于videojs的配置，以及引入了flvjs，在报错后可以进行修改访问

<!DOCTYPE html>
<html lang="en"><head><title>video</title><!-- Video.js --><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
</head><body><div><video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1024" height="768"> </video></div>
</body></html>
<script>
var flvUrl = "https://mister-ben.github.io/videojs-flvjs/bbb.flv";var player = videojs('videojs-flvjs-player', {techOrder: ['html5', 'flvjs'],flvjs: {mediaDataSource: {isLive: false,cors: true,withCredentials: false,},},sources: [{src: flvUrl,type: 'video/mp4'}],controls: true,preload: "none"
}, function onPlayerReady() {console.log('player ready')player.on('error', (err) => {console.log('first source load fail')player.src({src: flvUrl,type: 'video/x-flv'});player.ready(function() {console.log('player ready')player.load();player.play();});})
});
</script>

demo2 ：纯粹的flvjs，支持mp4和flv格式.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
</head>
<body><videoid="videoElement"class="video-component"ref="videoElement"controlsautoplay>Your browser is too old which doesn't support HTML5 video.</video></body>
</html>
<script>if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'https://mister-ben.github.io/videojs-flvjs/bbb.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}
</script>

小结

参考上面两个demo，基本可以让你初步使用flvjs实现flv格式的视频的播放了。但是这有个坑，那就是跨域问题。如果跨域没有配置好，是无法播放视频的。

参考资料

flv中文API文档
videojs中文api文档
demo1
如何在html中播放.flv格式的视频【vue和普通html皆可用】

流媒体之播放flv格式的视频相关推荐

网页播放flv格式的视频
问题:有一个flv格式的实时视频地址,想知道这个地址对吗?对应的资源能播放吗? 如果直接在浏览器打开这个地址,会下载. 所以得找一个网页播放的程序验证下. <div id="playe ...
在vue和html中播放.flv格式的视频
借助一个html标签object,来嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件.下载链接利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF(Fragmented M ...
h5如何播放flv格式的视频
我看到好多网上全是让你下载的,我按照他们的步骤打包好了,我心你想.你直接给我把打包好的文件共享一下.不就好了吗? 打包文件在最下面直接上代码吧这都是实际项目里面的,不是demo.所以不能展示全部代 ...
在网页在播放flv格式的视频
2019独角兽企业重金招聘Python工程师标准>>> 不解释,直接上代码~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关官网下载页面:点击我到达在线演示播放页面:点击我到达 Git页面:点 ...
通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
fwPlayer 支持最新浏览器在线播放AVI和FLV格式的视频
fwPlayer 支持最新浏览器在线播放AVI和FLV格式的视频可以使用 fwPlayer 使用webassembly技术,在线转码avi flv为mp4 或者ogg等来播放 fwPlayer 支持 ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
c++ DirectShow播放任意格式的视频
利用opencv只能处理.avi的视频,opencv之前的版本之前试过好像是只能处理.avi未压缩版本的视频,未压缩过的视频相当大,一个文件大概是几十个G.(这个不确定,因为之前用的压缩过的.avi的 ...
【音视频零基础入门 1】视频播放器原理、流媒体协议、封装格式、视频编码、音频编码
[音视频零基础入门 1]视频播放器原理.流媒体协议.封装格式.视频编码一.视频播放器原理 1.1 解协议 1.2 解封装 1.3 解码 1.4 视音频同步二.流媒体协议三.封装格式四.封装格式 ...

流媒体之播放flv格式的视频

起因

flv.js简介

flv用法

小结

参考资料

流媒体之播放flv格式的视频相关推荐

最新文章

热门文章