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

2019-09-13 10:55:11 阅读：282 来源： 互联网

标签：视频 Vue m3u8 js contrib video 引入格式 videojs

大家都知道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>

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

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

标签：视频,Vue,m3u8,js,contrib,video,引入,格式,videojs
来源： https://www.cnblogs.com/webfy/p/11516241.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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