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設置成動態修改，這樣就可以隨便播放自己喜歡的視頻了；

<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、設置播放；

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

　　

6、最后在style文件中給視頻設置一個寬高，插入到video中的class中空格添加；如果不設置的話會變成全屏顯示；

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

    

        啦啦啦，最后視頻就可以正常播放了！如果這篇文章幫助到了您的話，幫忙轉發下哦！謝謝了！

        如果覺得不錯請點點手指，關注下我們公眾號，我們會長期為您分享前端知識點；