51工具盒子# 创建基于h5的hls播放器hls.js {#创建基于h5的hls播放器hls-js}
本文介绍如何创建基于h5的hls播放器。默认情况下，浏览器并不支持播放hls格式的视频，但是集成开源的hls库hls.js后，可以使用h5自带的video标签播放hls(即m3u8)视频。
# 示例 {#示例}
<!DOCTYPE html> <html> <head></head> <body> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video"></video> </body><script> var video = document.getElementById('video'); var videoSrc = 'http://demo.com/index.m3u8'; if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(videoSrc); hls.attachMedia(video); } // hls.js is not supported on platforms that do not have Media Source // Extensions (MSE) enabled. // // When the browser has built-in HLS support (check using
canPlayType), // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video // element through thesrcproperty. This is using the built-in support // of the plain video element, without using hls.js. // // Note: it would be more normal to wait on the 'canplay' event below however // on Safari (where you are most likely to find built-in HLS support) the // video.src URL must be on the user-driven white-list before a 'canplay' // event will be emitted; the last video event that can be reliably // listened-for when the URL is not on the white-list is 'loadedmetadata'. else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoSrc; } </script>
</html>
