vue使用hls.js播放m3u8视频流
npm下载hls.js
npm i hls.js@1.0.9-0.canary.7938
导入Hls
import Hls from "hls.js"
播放视频流
mounted ( ) {
const that= this
this . hls = new Hls ( )
const video = this . $refs. video_player
this . hls. attachMedia ( video)
this . hls. on ( Hls. Events. MEDIA_ATTACHED , ( ) => {
that. hls. loadSource ( that. videoUrl)
} )
this . hls. on ( Hls. Events. MANIFEST_PARSED , function ( event, data ) {
video. play ( )
} ) ;
} ,
播放组件的完整代码
< template>
< div class = "container" >
< video
autoplay muted controls
width= "500" height= "400"
ref= "video_player" > < / video>
< / div>
< / template>
< script lang= "ts" >
import { defineComponent, ref} from 'vue' ;
import Hls from "hls.js" ;
export default defineComponent ( {
name: 'HLSVideoPlayer' ,
components: { } ,
props: {
videoUrl: {
type: String,
default : 'http: / / xxx. m3u8
}
} ,
setup ( ) {
return {
hls: ref ( undefined ) ,
} ;
} ,
watch: {
videoUrl ( ) {
this . hls. loadSource ( this . videoUrl)
}
} ,
mounted ( ) {
const that= this
this . hls = new Hls ( )
const video = this . $refs. video_player
this . hls. attachMedia ( video)
this . hls. on ( Hls. Events. MEDIA_ATTACHED , ( ) => {
that. hls. loadSource ( that. videoUrl)
} )
this . hls. on ( Hls. Events. MANIFEST_PARSED , function ( event, data ) {
video. play ( )
} ) ;
} ,
} ) ;
< / script>
< style scoped lang= "scss" >
< / style>