Vue2.0 + vue-video-player：HLS播放实战与兼容优化

本文主要讲述了在Vue 2.0框架下使用vue-video-player实现HLS（HTTP Live Streaming）视频播放的全过程。作者的背景是公司计划建立自己的视频点播服务，出于成本考虑和使用开源技术的决定，他们选择了自建流媒体服务并寻找适合的前端视频播放器。 起因部分，作者提到由于排斥云视频平台，尽管它们提供了完整的解决方案，但决定自行开发。在这个过程中，他们发现vue-dplayer在iOS上可以播放HLS文件，但在PC上的Chrome浏览器不支持，因此转向了vue-video-player。 选择vue-video-player的原因包括： 1. 作者之前已经在流媒体服务管理页面使用过videoJs，对vue-video-player有所了解，其基于videoJs封装，提供了良好的用户体验。 2. 在搜索引擎结果中，vue-video-player排名靠前，显示其受欢迎度和活跃度。 3. demo页面展示了丰富的协议支持，符合需求。 4. 虽然存在一些未解决的issue，作者相信庞大的用户基础和videoJs的强大支持能够解决问题。 文章接下来会详细介绍如何安装vue-video-player的依赖，以及如何配置它来支持HLS播放。这个过程可能包括引入hls.js库，修改vue-video-player的相关配置，确保在Vue环境中正确集成HLS功能。此外，还可能会涉及兼容性调整，如针对不同浏览器环境的适配，以及可能遇到的问题及其解决方案。 这篇文章将深入讲解如何在vue2.0项目中使用vue-video-player实现高效稳定的HLS视频播放，适合对前端视频播放技术有一定了解并对开源解决方案感兴趣的开发者阅读参考。