Vue中如何插入m3u8格式视频,3分钟学会!

​        大家都知道video只支持ogg、webm、MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一篇文章,跟大家分享一下;

    

1、在Vue中引入m3u8格式视频需要引入video.js和video-contrib-bls;

npm install --save video.js
npm install --save videojs-contrib-hls

  

2、在main.js文件中引入css,设置视频的样式;

//  main.js中引入css 
import 'video.js/dist/video-js.css'

  

3、在使用的.Vue文件中,引入video.js和video-contrib-bls;只需要在使用的地方引入,不使用的地方就不需要引入了;

import videojs from 'video.js'
import 'videojs-contrib-hls'

  

4、引入播放器,需要动态设置视频的小伙伴可以把src设置成动态修改,这样就可以随便播放自己喜欢的视频了;


 

5、设置播放;

export default {
    mounted() {
        videojs("my-video", 
            function() {
            this.play();
        });
    }
};

  

6、最后在style文件中给视频设置一个宽高,插入到video中的class中空格添加;如果不设置的话会变成全屏显示;

    

        啦啦啦,最后视频就可以正常播放了!如果这篇文章帮助到了您的话,帮忙转发下哦!谢谢了!

Vue中如何插入m3u8格式视频,3分钟学会!_第1张图片

        如果觉得不错请点点手指,关注下我们公众号,我们会长期为您分享前端知识点;

Vue中如何插入m3u8格式视频,3分钟学会!_第2张图片

 

你可能感兴趣的:(Vue中如何插入m3u8格式视频,3分钟学会!)