2021-02-02

创建基于h5的hls播放器hls.js

# 创建基于h5的hls播放器hls.js

本文介绍如何创建基于h5的hls播放器。默认情况下，浏览器并不支持播放hls格式的视频，但是集成开源的hls库hls.js后，可以使用h5自带的video标签播放hls(即m3u8)视频。

# 示例

<!DOCTYPE html>
<head></head>
  <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 the `src` property. 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>

官网 (opens new window)

上次更新: 2021-02-05 13:51:25

typescript转换为javascript 动态创建script标签 →