Discuz! Board

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1606|回复: 0
打印 上一主题 下一主题

h5/video标签借用hls.js播放m3u8格式视频

[复制链接]

1272

主题

2067

帖子

7962

积分

认证用户组

Rank: 5Rank: 5

积分
7962
跳转到指定楼层
楼主
发表于 2023-1-11 17:16:23 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
blog.csdn.netm0_60432755/article/details/126986065
1.版本

"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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|firemail ( 粤ICP备15085507号-1 )

GMT+8, 2024-11-25 09:39 , Processed in 0.060758 second(s), 20 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表