As is known to us. HLS is an important video format for all big video service platform for Apple, Netflix and Tencent Video Entertainment. HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet.
HLS protocol chops up MP4 video content into short (10-second) chunks with the .ts file extension (MPEG2 Transport Stream). Next, an HTTP server stores those streams, and HTTP delivers these short clips to viewers on their devices. (HLS will play video encoded with the H.264 or HEVC/H.265 codecs.) The HTTP server also creates a .M3U8 playlist file (e.g. manifest file) that serves as an index for the video chunks. That way, even if you choose to broadcast live using only a single quality option, the file will still exist.
How to Use
@core-player/playcore-hls is a decoding service for vue-core-video-player. And you can easily import it and support HLS decoding.
$ npm install vue-core-video-player --save
$ npm install @core-player/playcore-hls --save
Then edit your vue file.
<template>
<div id="app">
<div class="player-container">
<vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player>
</div>
</div>
</template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
import HLSCore from '@core-player/playcore-hls
Vue.use(VueCoreVideoPlayer)
export default {
name: 'App',
data () {
return {
HLSCore
}
}
}
</script>
The plugin is powered by the famous framework hls.js. And you can import your own hls.js CDN source via script in your html file.
...
<div id="app"></div>
<script src="your_cdn_hls.min.js"></script>
<scipt src="your_vue_bundle.main.js"></script>
...