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>

效果:

学习啦:

特点:

  1. 适应性流媒体:HLS 支持根据用户的网络状况动态调整视频的质量(分辨率和码率),以提供更好的观看体验。
  2. 基于 HTTP 的传输:HLS 使用标准的 HTTP 协议进行传输,这使得它能够绕过防火墙,并且在各种设备和网络中都可以顺利工作。
  3. 广泛的设备支持:HLS 支持各种设备,包括智能手机、桌面浏览器、电视机顶盒等,尤其在 Apple 的设备上有原生支持。
  4. 易于扩展:HLS 可以支持大规模的观众群体,通过 HTTP 请求的方式,它能够很容易地扩展以适应更多用户的需求。

应用场景

1. 视频直播
2. 点播服务(VOD)
3. 实时会议和远程视频
4. 直播社交平台
5. 监控与安防
6. 智能电视和机顶盒
7. 广告与营销

HLS 与其他流媒体协议(如 RTMP、DASH、WebRTC 等)相比,具有以下优缺点:

优点:
  1. 兼容性强:几乎所有的现代浏览器和设备(包括 iOS、Android、PC 等)都支持 HLS。
  2. 适应性流媒体:HLS 能根据网络条件自动调整视频质量,确保在带宽波动的情况下也能提供流畅的视频体验。
  3. 稳定性:基于 HTTP 协议的流媒体能够利用 HTTP 缓存和负载均衡技术,提供更好的扩展性和稳定性。
  4. 跨平台支持:由于 HLS 是基于 HTTP 的,可以在几乎所有网络环境和平台上使用。
缺点:
  1. 延迟较高:HLS 的延迟通常比 RTMP 或 WebRTC 要高,因为它需要将视频分段存储并通过 HTTP 请求传输。这对于实时交互性要求高的场景(如视频会议)不太适用。
  2. 较大的带宽占用:HLS 使用较大的视频段(通常为 2-10 秒),在低带宽环境下,可能会导致频繁的缓存和重新缓冲。
  3. 实时性差:由于 HLS 是基于分段传输的,不能像 WebRTC 或 RTMP 那样实现超低延迟的实时流传输。
相关推荐
墨染枫2 小时前
pytorch学习笔记-自定义卷积
pytorch·笔记·学习
今天也好累4 小时前
C 语言基础第16天:指针补充
java·c语言·数据结构·笔记·学习·算法
朱小弟cs65 小时前
Orange的运维学习日记--16.Linux时间管理
linux·运维·学习
两颗泡腾片6 小时前
C++提高编程学习--模板
c++·学习
shangyingying_17 小时前
关于神经网络CNN的搭建过程以及图像卷积的实现过程学习
神经网络·学习·cnn
ayas123199 小时前
CSS学习
前端·css·学习
Chase_______11 小时前
redis快速入门及使用
java·数据库·redis·学习·spring·缓存
阿群今天学习了吗11 小时前
RNN、LSTM、Transformer推荐博文
人工智能·笔记·python·学习·算法
Linux技术支持工程师11 小时前
三十四、【Linux常用工具】rsync+inotify实时同步演示
linux·运维·服务器·学习·kylin
●VON11 小时前
重生之我在暑假学习微服务第五天《Docker部署项目篇》
java·学习·docker·微服务·云原生·架构·暑假