B站视频开源代码flv.js+HTML5无flash播放视频

74 阅读 0 评论 49 点赞

我是靠谱客的博主虚幻鸵鸟，最近开发中收集的这篇文章主要介绍B站视频开源代码flv.js+HTML5无flash播放视频，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

源码地址 https://github.com/bilibili/flv.js

git clone https://github.com/bilibili/flv.js

cd  flv.js-master

npm install

npm和node.js的安装不做介绍不想那么麻烦的在这里提取

链接：网盘地址
提取码：kqls

直接上源码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="flv.js-masterdemodemo.css">
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="flv.js-masterdistflv.js"></script>
</head>
<body>

        <video id="videoElement" width="100%" controls></video>
        <script>
            function f(type,url) {

                
                    if (flvjs.isSupported()) {
                        var videoElement = document.getElementById('videoElement');
                        var flvPlayer = flvjs.createPlayer({
                            type: type,
                            url: url,
                        });
                        flvPlayer.attachMediaElement(videoElement);
                        flvPlayer.load();
                        flvPlayer.play();
                    }
                
               
            }
        </script>
    <div class="tvlist" >
            <div style="text-align:center;font-size:18px;width:100%;background:#333;line-height:44px;margin-bottom:1px;color:#fff;margin: 0 auto">请选择分集</div>
            <div class="tvlistbox">
                <script type="text/javascript">
                    /*视频名称*/
                    var videoTitle = "视频1|视频2|视频3";
                    var titleList = videoTitle.split("|");
                    for (var i = 0; i < titleList.length; i++){
                        if(titleList[i] != ""){
                            document.write('<a class="col-md-4 btn btn-default" data-code="'+i+'" onclick="javascript:changeStream('+i+');">'+titleList[i]+'</a>');
                        }
                    }
                    /*视频链接*/
                    var CuPlayerList ="1.mp4|2.mp4|3.mp4";
                    var sp =CuPlayerList.split("|")
                    var _ext =sp[0].split(".").pop();

                    if(sp.length<=0){
                        alert('没有视频！');
                        history.back();
                    }else {
                        $(".tvlistbox a").each(function (index) {
                            if(index==0){
                                $(this).css("background","#c7402a");
                            }else{
                                $(this).css("background","#eee");
                            }

                        })
                        f(_ext,sp[0]);
                    }

                    function changeStream(i){
                        $(".tvlistbox a").each(function (index) {
                            //console.log(index);
                            if(index==i){
                                $(this).css("background","#c7402a");
                            }else{
                                $(this).css("background","#eee");
                            }

                        })
                        var ext =sp[i].split(".").pop();
                        f(ext,sp[i]);
                    }
                </script>
            </div>
        </div>

</body>
</html>