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 那样实现超低延迟的实时流传输。
相关推荐
DKPT1 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好好研究3 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师4 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF5 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上5 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen7 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
X_StarX8 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS8 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
weixin_437398219 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
慕y2749 小时前
Java学习第十六部分——JUnit框架
java·开发语言·学习