h5/video标签借用hls.js播放m3u8格式视频
blog.csdn.netm0_60432755/article/details/1269860651.版本
"vue": "2.6.14",
"hls.js": "^1.1.1",
2. 子组件
<template>
<div class="item-video-box1">
<video class="player" controls ref='player_big_box'preload></video>
</div>
</template>
<script>
let Hls = require('hls.js')
export default {
name: "item-video-box1",
components:{
},
props:{
videourl:{
type:String,
default:'ttt'
}
},
data() {
return {
item:{}
}
},
watch:{
// 监听父组件传参替换视频路径
videourl:{
immediate: true,
handler: function (newval) {
if(newval != 'ttt'){
// console.log(newval);
const url = newval;
setTimeout(() => {
this.initVideo(url)
}, 1000)
}
}
}
},
mounted(){
},
methods: {
// 赋值方法
initVideo(url){
this.item.player = new Hls()
this.item.player.loadSource(url);
this.item.player.attachMedia(this.$refs.player_big_box)
this.item.player.on(Hls.Events.MANIFEST_PARSED, () => {
this.$refs.player_big_box.play()
})
}
},
}
</script>
<style lang="scss" scoped>
.item-video-box1{
width: 100%;
height: 100%;
.player{
width: 100%;
height: 100%;
}
}
</style>
3. 父组件调用
<div class="video-div"v-for="item in 21">
<item-video-box videourl="http://******.m3u8"></item-video-box>
</div>
完成。
————————————————
版权声明：本文为CSDN博主「赈早见.琥珀猪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60432755/article/details/126986065
页:
[1]