hls视频流学习

hls格式播放的依赖安装：

复制代码

<!-- 新增hls播放库 -->

npm install hls.js

组件封装：

javascript 复制代码

<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>

应用：

javascript 复制代码

<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 那样实现超低延迟的实时流传输。