flvjs实现视频播放——示例

前言

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>

感谢诸君的观看,文中如有纰漏,欢迎在评论区来交流。如果这篇文章帮助到了你,欢迎点赞关注。

你可能感兴趣的:(视频,音视频,javascript,前端)