美文网首页
h5 video支持hls(.m3u8)文件播放

h5 video支持hls(.m3u8)文件播放

作者: plum_meizi | 来源:发表于2021-11-15 16:44 被阅读0次

    1.安装

    npm install hls.js
    

    2.使用

    <video ref="hlsvideo" loop autoplay controls></video>
    
    import Hls from 'hls.js';
    
    private init(data) {
        // 支持 .m3u8 hls
        const hlsvideo = this.$refs.hlsvideo as HTMLMediaElement;
        const hls = new Hls();
        hls.loadSource(data.videoUrl);
        hls.attachMedia(hlsvideo);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
        hlsvideo.play();
        });
    }
    

    相关文章

      网友评论

          本文标题:h5 video支持hls(.m3u8)文件播放

          本文链接:https://www.haomeiwen.com/subject/hibhtrtx.html