video.js播放m3u8视频

article/2025/9/16 3:20:27

m3u8 是一种基于HTTP Live Streaming（HLS）文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。目前由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持。
video.js是H5视频播放器，支持播放m3u8视频。这里做了一个简易的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 aweb 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 switchervar 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>