flv.js是由Bilibili开源(Apache)的一个HTML5纯JavaScript编写的Flash 视频(FLV)播放器,不需要flash,HTTP FLV直播当前不是所有的浏览器都支持,目前支持(Chrome 43+、FireFox 42+、Edge 15.15048+和Safari 10.1+)。它解析FLV文件转码为ISO BMFF(MP4碎片)片段,然后通过Media Source Extensions将片段喂给原生HTML5 video标签进行播放音视频数据,使浏览器在不借助Flash的情况下播放FLV。
为什么要使用flv.js呢?因为目前浏览器厂商已经开始默认禁用Flash了,但由于Flash影响力还在,做互联网直播的公司为了能兼容Web上的Flash播放,不约而同地选择了flv格式,可HTML5只支持Ogg、MPEG4、WebM格式,不能平滑的从Flash过渡到HTML5,flv.js解决了这个问题。
特点:
①flv.js支持视频编码为H.264,音频编码为AAC或MP3的flv文件。
②支持视频懒加载,分段加载播放。
③同时支持直播和录播
④占用极低的资源,采用硬件加速,性能更好,支持高清。
⑤纯JavaScript编写,不需要对Flash依赖。
flv.js百度网盘下载
链接:https://pan.baidu.com/s/1f2bWgq_e05rs106vihReUw
提取码:itt3
DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demotitle>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
style>
head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.video>
div>
<br>
<div class="controls">
<button onclick="flv_start()">开始button>
<button onclick="flv_pause()">暂停button>
<button onclick="flv_destroy()">停止button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转button>
div>
<script src="/js/flv.js/">script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
console.log(window.location.host);
var flvPlayer = flvjs.createPlayer({
type: 'auto',//flv
//"isLive": true,//<====加个这个
url: '/images/video/h264.mp4',//<==自行修改 视频路径
},{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
}
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flv_start();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
script>
body>
html>
感谢诸君的观看,文中如有纰漏,欢迎在评论区来交流。如果这篇文章帮助到了你,欢迎点赞关注。