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

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

# 示例

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;

}