videojs-flvjs：video.js + flv.js播放m3u8和flv视频

news2024/11/15 5:50:09

videojs-flvjs是video.js的扩展，让video.js支持flv.js播放器，可以在video.js的techOrder里配置flvjs播放器。
下面做了一个切换m3u8和flv直播流的简易工具：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video+flv视频播放测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
    <style type="text/css">
        .example-video {
            width: 100%;
            height: 500px;
        }

        .form1 {
            display: block;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <video class="video-js example-video vjs-default-skin vjs-big-play-centered" controls preload="auto"
                id="videojs-flvjs-player">
                <source src="//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
                    type="application/x-mpegURL">
                </source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                </p>
            </video>
        </div>
        <div class="row">
            <form action="" id="load-url-m3u8" class="form1">
                <label for="url">M3U8地址：</label>
                <input type="text" size="100" name="video" id="url-m3u8">
                <button type="submit">加载M3U8</button>
            </form>
            <form action="" id="load-url-flv" class="form1">
                <label for="url">FLV地址：</label>
                <input type="text" size="100" name="video" id="url-flv">
                <button type="submit">加载FLV</button>
            </form>
        </div>
    </div>
</body>

</html>
<script>
    (function (window, videojs) {
        var player = window.player = videojs('videojs-flvjs-player', {
            techOrder: ['html5', 'flvjs'],
            flvjs: {
                mediaDataSource: {
                    cors: true,
                    withCredentials: false,
                },
            },
            controls: true,
            preload: "none"
        });

        // 切换到m3u8格式
        var loadUrl = document.getElementById('load-url-m3u8');
        var url = document.getElementById('url-m3u8');
        loadUrl.addEventListener('submit', function (event) {
            event.preventDefault();
            player.reset();
            player.src({
                src: url.value,
                type: 'application/x-mpegURL'
            });
            player.load(url.value);
            player.play()
            return false;
        });

        // 切换到FLV格式
        var loadUrl_flv = document.getElementById('load-url-flv');
        var url_flv = document.getElementById('url-flv');

        loadUrl_flv.addEventListener('submit', function (event) {
            event.preventDefault();
            player.reset();
            player.src({
                src: url_flv.value,
                type: 'video/x-flv'
            });

            player.load(url_flv.value);
            player.play()
            return false;
        });

    }(window, window.videojs));
</script>