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

javascript 专栏收录该内容
7 篇文章 0 订阅

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

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

cd  flv.js-master

npm install 

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

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

653b2a5f4da492c841a12bb0f7f67158783.jpg

直接上源码

<!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-master\demo\demo.css">
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="flv.js-master\dist\flv.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>

 

评论 12 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

Marhal

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值