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

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

    

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

?

1	npm install --save video.js<br>npm install --save videojs-contrib-hls

　　

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

?

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

　　

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

?

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

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div>         <video           id="my-video"           class="video-js vjs-default-skin box"           controls           preload="auto"         >             <source                 src="https://videos8.jsyunbf.com/20190717/s6DaVnKb/index.m3u8"                 type="application/x-mpegURL"             />         </video>     </div> </template>

 

5、设置播放；

?

1 2 3 4 5 6 7 8

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

　　

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

?

1 2 3 4 5 6 7

<style scoped> .box {     width: 400px;     height: 300px;     border: 20px solid; } </style>

    

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

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