用了video.js來做播放器播放hls和rtmp直播源之後，這次用hls.js來播放Hls直播源
video.js和hls.js的差別和優缺點
video.js：
- 優點：功能比較強大，有很多功能封裝好了，而且有自己的一套UI，在不同浏覽器下顯示比較一緻
- 缺點：包比較大，實作hls直播的時候其實是内嵌了hls.js的代碼，實際上是運用了hls.js，而且由于封裝的ui和功能，使其不夠純淨，不夠靈活，修改ui的時候要用到其他的插件，有點畫蛇添足的感覺
hls.js：
- 優點：包比較小，很純淨，UI可以根據自己的業務自擴充，自己封裝功能和UI，比較切合自己開發的直播播放器，而且專業直播HLS
- 缺點：沒有封裝好的UI，功能上也需要自己去實作
hls.js播放hls直播源 （要放在伺服器上）
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>hls.js</title>
<link rel="stylesheet" href="./index.css" target="_blank" rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<video id="video" controls></video>
<script src="./index.js" charset="utf-8"></script>
</body>
</html>
index.js:
var Hls = window.Hls
var url = 'http://localhost:8765/hls/movie.m3u8'
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(url)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
// video.play()
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url
video.addEventListener('canplay', function () {
// video.play()
})
}
至于播放自己的樣式和功能，可以根據自己的需要和興趣自己去添加
![ts封裝，H264和aac 封裝成為ts，并生成m3u8[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)