hls格式播放的依赖安装：
<!-- 新增hls播放库 -->npm install hls.js组件封装：
<template><div class="hls-player-cls"><video ref=" video" controls style="width: 100%; max-width: 800px;"></video></div>
</template><script>
import Hls from 'hls.js';export default {name: 'HlsPlayer',props: {videoUrl: {type: String,required: true,default: ''},},mounted () {this.initPlayer();},beforeUnmount () {this.destroyPlayer();},methods: {initPlayer () {if (Hls.isSupported()) {this.hls = new Hls();this.hls.loadSource(this.videoUrl);this.hls.attachMedia(this.$refs.video);this.hls.on(Hls.Events.MANIFEST_PARSED, () => {this.$refs.video.play();});} else if (this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) {// 原生支持HLS的情况（如Safari）this.$refs.video.src = this.videoUrl;this.$refs.video.addEventListener('loadedmetadata', () => {this.$refs.video.play();});}},destroyPlayer () {if (this.hls) {this.hls.destroy();this.hls = null;}},},
};
</script><style scoped lang="scss"></style>
应用：
<template><HlsPlayer src="//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8"></HlsPlayer>
</template>
<script setup>
import HlsPlayer from "../components/HlsPlayer.vue";
</script>效果：
、
学习啦：
特点：
- 适应性流媒体：HLS 支持根据用户的网络状况动态调整视频的质量（分辨率和码率），以提供更好的观看体验。
- 基于 HTTP 的传输：HLS 使用标准的 HTTP 协议进行传输，这使得它能够绕过防火墙，并且在各种设备和网络中都可以顺利工作。
- 广泛的设备支持：HLS 支持各种设备，包括智能手机、桌面浏览器、电视机顶盒等，尤其在 Apple 的设备上有原生支持。
- 易于扩展：HLS 可以支持大规模的观众群体，通过 HTTP 请求的方式，它能够很容易地扩展以适应更多用户的需求。
应用场景
1. 视频直播
2. 点播服务（VOD）
3. 实时会议和远程视频
4. 直播社交平台
5. 监控与安防
6. 智能电视和机顶盒
7. 广告与营销
HLS 与其他流媒体协议（如 RTMP、DASH、WebRTC 等）相比，具有以下优缺点：
优点：
- 兼容性强：几乎所有的现代浏览器和设备（包括 iOS、Android、PC 等）都支持 HLS。
- 适应性流媒体：HLS 能根据网络条件自动调整视频质量，确保在带宽波动的情况下也能提供流畅的视频体验。
- 稳定性：基于 HTTP 协议的流媒体能够利用 HTTP 缓存和负载均衡技术，提供更好的扩展性和稳定性。
- 跨平台支持：由于 HLS 是基于 HTTP 的，可以在几乎所有网络环境和平台上使用。
缺点：
- 延迟较高：HLS 的延迟通常比 RTMP 或 WebRTC 要高，因为它需要将视频分段存储并通过 HTTP 请求传输。这对于实时交互性要求高的场景（如视频会议）不太适用。
- 较大的带宽占用：HLS 使用较大的视频段（通常为 2-10 秒），在低带宽环境下，可能会导致频繁的缓存和重新缓冲。
- 实时性差：由于 HLS 是基于分段传输的，不能像 WebRTC 或 RTMP 那样实现超低延迟的实时流传输。
