? 大家都知道 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>
啦啦啦, 最后视频就可以正常播放了! 如果这篇文章帮助到了您的话, 帮忙转发下哦! 谢谢了!
如果觉得不错请点点手指, 关注下我们公众号, 我们会长期为您分享前端知识点;
来源: http://www.bubuko.com/infodetail-3195579.html