vue3 使用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]。 ---

要在Vue项目中实现m3u8视频流的播放并支持清晰度切换，首先需要确保已经安装了Video.js及其对m3u8支持的贡献包Video.js-contrib-hls。接着，创建一个Vue组件并在其中引入Video.js的样式文件。然后，在组件的模板中添加一个video元素，并指定m3u8视频流的URL。在组件的脚本部分，利用Vue的生命周期钩子函数`mounted`来初始化Video.js播放器，并通过Video.js提供的API实现清晰度切换的功能。 参考资源链接：[Vue与Video.js实战：播放m3u8视频流教程](https://wenku.csdn.net/doc/645c91ca95996c03ac3c355d?spm=1055.2569.3001.10343) 此过程中，需要注意的是，Video.js对于m3u8视频流的支持是通过videojs-contrib-hls插件实现的，因此在安装Video.js后，还需要单独安装此插件。此外，对于清晰度切换功能的实现，需要在Video.js实例上注册事件监听器，并根据用户的选择动态更新播放器的视频源。这可能涉及到监听视频源加载成功事件，并在事件触发时设置新的播放源URL。 为了更深入地理解和实践这一过程，推荐阅读《Vue与Video.js实战：播放m3u8视频流教程》。该教程详细介绍了在Vue项目中集成Video.js，并通过实例逐步指导如何播放m3u8格式的视频流，以及如何添加清晰度切换功能。通过学习这份资料，你将能够掌握在前端开发中处理视频流的有效方法，并能够根据项目需要灵活运用这些技术。 参考资源链接：[Vue与Video.js实战：播放m3u8视频流教程](https://wenku.csdn.net/doc/645c91ca95996c03ac3c355d?spm=1055.2569.3001.10343)