Vue Hls Live是一個(gè)可以將視頻流實(shí)時(shí)播放的Vue組件。HLS（HTTP Live Streaming）是一種視頻流傳輸協(xié)議，它可以在網(wǎng)絡(luò)不穩(wěn)定的情況下保持較好的表現(xiàn)。Vue Hls Live利用這種協(xié)議，實(shí)時(shí)播放視頻并可以隨著視頻流的變化自動(dòng)更新播放器。

// 安裝hls.js
npm install hls.js
// 引入hls.js
import Hls from 'hls.js';
// 在mounted中創(chuàng)建播放器
mounted() {
const video = this.$refs.video;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('http://example.com/playlist.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
}

上面的代碼中，我們首先安裝了hls.js，然后在mounted鉤子函數(shù)中創(chuàng)建了播放器。使用Hls.isSupported()判斷當(dāng)前瀏覽器是否支持HLS協(xié)議，如果支持就創(chuàng)建Hls實(shí)例，將視頻源URL傳入loadSource方法，然后將video元素附加到Hls實(shí)例上，最后在Hls.Events.MANIFEST_PARSED事件中調(diào)用video的play方法開(kāi)始播放。

對(duì)于Vue Hls Live組件，我們只需要將上面的播放器代碼作為子組件引入，然后在模板中添加video元素，通過(guò)props傳入視頻源URL即可。

// 父組件中// VueHlsLive組件

通過(guò)這樣的封裝，我們可以在Vue應(yīng)用中方便地使用實(shí)時(shí)視頻流播放功能。