vue使用video.js实现播放m3u8视频流

### Vue 中集成 Video.js 支持 M3U8 视频流播放 要在 Vue 项目中实现通过 Video.js 播放 M3U8 格式的视频流，可以按照以下方式完成配置和开发。 #### 主要依赖安装 首先，在项目根目录下运行命令来安装必要的库： ```bash npm install video.js --save ``` 对于 HLS 流的支持，早期需要额外安装 `videojs-contrib-hls` 插件。但在较新的版本中，该功能已被内置到 Video.js 中，因此无需单独安装此插件[^5]。 #### 配置样式文件 在项目的入口文件（通常是 `main.js`），全局引入 Video.js 的 CSS 样式文件以便统一加载样式资源。 ```javascript import 'video.js/dist/video-js.css'; ``` 这一步确保了整个应用中的所有实例都能继承默认的外观设计[^1]。 #### 页面组件编写 创建一个新的 Vue 组件用于展示视频播放器，并在此处初始化 Video.js 实例。 ##### 数据定义部分 定义数据属性存储目标媒体 URL 地址以及其它可能的状态变量。 ```javascript data() { return { videoUrl: "http://example.com/path/to/your/stream.m3u8", }; } ``` 上述代码片段指定了一个示例性的直播流链接作为初始值[^4]。 ##### 生命周期钩子函数 利用 Vue 提供的生命週期方法 `mounted()` 来触发播放器渲染逻辑；同时借助 `$nextTick` 方法等待 DOM 更新完成后执行操作。 ```javascript mounted() { this.$nextTick(() => { this.initVideo(); }); }, beforeDestroy() { if (this.player) { this.player.dispose(); // 清理销毁 player 对象防止内存泄漏 } } ``` 这里还包含了清理工作以防潜在性能问题的发生。 ##### 自定义方法封装 构建独立的方法处理复杂业务流程比如初始化播放器等动作。 ```javascript methods:{ initVideo(){ const options = { autoplay:true, controls:true, preload:'auto', fluid : true , sources:[{ src:this.videoUrl, type:"application/x-mpegURL" }] }; this.player = videojs('my-video',options,function readyFunction(){ console.log('The player is now ready.'); }); window.myPlayer = this.player; }, } ``` 注意这里的 `type` 参数指定为 `"application/x-mpegURL"` 是为了告知解析引擎当前源是一个 HLS 类型的内容[^2]。 #### HTML 结构模板 最后不要忘记提供对应的 HTML 容器标签给 JavaScript 动态挂载使用。 ```html <template> <div class="video-container"> <video id="my-video" class="video-js vjs-default-skin"></video> </div> </template> <style scoped lang="scss"> /* 可选自定义样式 */ .video-container { width: 100%; height: auto; } @media only screen and (max-width: 768px){ .video-container { padding-top: 56.25%; /* 保持宽高比例适配移动设备屏幕尺寸 */ } } </style> ``` 以上即完成了基本的功能搭建过程[^3]。 ---