video.js播放m3u8视频

原创

小龙在山东 2023-01-07 00:31:31 博主文章分类：javascript ©著作权

文章标签 javascript 音视频开发语言 ide css 文章分类 运维

©著作权归作者所有：来自51CTO博客作者小龙在山东的原创作品，请联系作者获取转载授权，否则将追究法律责任

m3u8 是一种基于HTTP Live Streaming（HLS）文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。目前由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持。

video.js是H5视频播放器，支持播放m3u8视频。这里做了一个简易的m3u8视频地址测试页：

video.js播放m3u8视频_开发语言

<!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>M3U8视频播放测试</title>
    <link rel="stylesheet" crossorigin="anonymous" href="https://unpkg.com/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.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="example-video">
                <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" class="form1">
                <label for="url">视频地址：</label>
                <input type="text" size="100" name="video" id="url">
                <button type="submit">加载</button>
            </form>

        </div>
    </div>
    <script>
        (function (window, videojs) {
            var player = window.player = videojs('example-video');

            // hook up the video switcher
            var loadUrl = document.getElementById('load-url');
            var url = document.getElementById('url');
            loadUrl.addEventListener('submit', function (event) {
                event.preventDefault();
                player.src({
                    src: url.value,
                    type: 'application/x-mpegURL'
                });
                return false;
            });
        }(window, window.videojs));
    </script>
</body>

</html>