Javascrip 學習使用 flv.js 播放視頻

 Html及其Javascript 代碼：

引用組件 

 <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/Content/AdminLTE/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/Content/AdminLTE/cdnjs/css/font-awesome.min.css" />
 <link rel="stylesheet" href="/Content/AdminLTE/plugins/Font-Awesome-3.2.1/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/Font-Awesome-3.2.1/css/font-awesome-ie7.min.css" />



<!-- jQuery 2.2.3 -->
    <script src="/Content/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
    <script src="/Content/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- flv.js -->
 <script src="/Content/AdminLTE/plugins/flv.js-master/dist/flv.js"></script>

正式頁面

@{
    ViewBag.Title = "ManualVideo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style{
    <style type="text/css">
        .video {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .video_body video {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .video_footer {
            margin-top: 10px;
            color: #333;
            background-image: linear-gradient(to bottom right, #C5C5C5, #63A8D5);
            border-color: #ddd;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            box-shadow: 0 0 7px #000;
            margin-bottom: 30px;
        }

            .video_footer button {
                padding: 5px;
                margin: 10px;
            }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

}

<div class="content-wrapper margin-left0">
    <section class="left fixed-top0"></section>
    <!-- Main content -->
    <section class="content">

        <div class="box">
            <div class="box-body">


                <div class="video container-fluid">
                    <div class="video_body">
                        <div class="panel panel-primary">
                            <div class="panel-heading"> 標題: <span>XXXXXXXXXXXXXX視頻</span></div>
                            <div class="panel-body">


                                <video id="videoElement" controls="controls" width="1024">Your browser is too old which doesn't support HTML5 video.</video>
                            </div>
                        </div>
                        <div class="img_show_wrap" style="display:none">
                            <canvas width="720" height="450" id="V2I_canvas"></canvas>
                            <img id="image_el" src="" alt="">
                        </div>
                    </div>
                    <div class="video_footer">
                        <div class="controls">
                            <button id="flv_start" class="btn"><i class="fa fa-play"></i> 開 始</button>
                            <button id="flv_pause" class="btn"><i class="fa fa-pause"></i> 暫 停</button>
                            <button id="flv_muted" class="btn"><i class="fa fa-volume-up"></i> 靜 音</button>
                            <button id="flv_fullscreen" class="btn"> <i class="fa fa-arrows-alt"></i> 全 屏</button>
                            <button id="flv_load" class="btn"><i class="fa fa-refresh"></i> 加 載</button>
                            <textarea id="sURL" style="width:98%;margin-left:10px" placeholder="輸入視頻地址"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>

    </section>
</div>

@section script{

    <script src="/Content/AdminLTE/plugins/flv.js-master/dist/flv.js"></script>

    <script>

        $('#videoElement').bind('contextmenu', function () { return false; });

        var player = document.getElementById('videoElement');

        $("#sURL").val("https://vdept.bdstatic.com/31643452654334747741584770533663/744b7a464e415a54/f9d41015f48b0c11fb443ed06e29e5132bb786ac7a6ce4ec6065d6a9a8309b5403da9d30fbf213224ac62be39b8fae81.mp4?auth_key=1587373307-0-0-e5cc9ff74c34a1bbcb3f2ffe3afa1422");

        var videourl = $("#sURL").val();

        var videotype = getextname(videourl);

        flv_load(videourl, videotype);

        function flv_load(videourl, videotype) {
            if (flvjs.isSupported()) {
                var flvPlayer = flvjs.createPlayer({
                    type: videotype,
                    url: videourl
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load(); //加載
            }
        }

        function flv_start() {
            player.play();
        }

        function flv_pause() {
            player.pause();
        }

        //進入全屏
        function flv_fullscreen() {
            var ele = document.getElementById('videoElement');;
            if (ele.requestFullscreen) {
                ele.requestFullscreen();
            } else if (ele.mozRequestFullScreen) {
                ele.mozRequestFullScreen();
            } else if (ele.webkitRequestFullScreen) {
                ele.webkitRequestFullScreen();
            }
        }

        function flv_muted() {
            var ele = document.getElementById('videoElement');
            var btn_flv_muted = document.getElementById("flv_muted");
            var btn_flv_muted_i = btn_flv_muted.firstChild;

            if (ele.muted) {
                btn_flv_muted_i.className = "fa fa-volume-up";
                ele.muted = false;
            }
            else {
                btn_flv_muted_i.className = "fa fa-volume-off";
                ele.muted = true;
            }
        }

        function htmlToImage() {
            var canvas = document.getElementById("V2I_canvas");
            if (!canvas.getContext) {
                alert("您的瀏覽器暫不支持canvas");
                return false;
            } else {
                var context = canvas.getContext("2d");
                var video = document.getElementById("video_el");
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                return mySrc = canvas.toDataURL("image/png");
            }

            $("#image_el").attr("src", mySrc);
        }

        function getextname(filename) {
            if (!filename || typeof filename != 'string') {
                return false
            };
            let a = filename.split('').reverse().join('');
            let b = a.substring(0, a.search(/\./)).split('').reverse().join('');
            return b
        };

        var btn_flv_load = document.getElementById("flv_load");
        btn_flv_load.onclick = function () {
            videourl = $("#sURL").val();
            videotype = getextname(videourl);
            flv_load(videourl, videotype);
        }


        var btn_flv_start = document.getElementById("flv_start");
        btn_flv_start.onclick = function () { flv_start(); }

        var btn_flv_pause = document.getElementById("flv_pause");
        btn_flv_pause.onclick = function () { flv_pause(); }

        var btn_flv_fullscreen = document.getElementById("flv_fullscreen");
        btn_flv_fullscreen.onclick = function () { flv_fullscreen(); }

        var btn_flv_muted = document.getElementById("flv_muted");
        btn_flv_muted.onclick = function () { flv_muted(); }

    </script>


}