本文介绍了如何在web端播放m3u8视频流，讲解了HLS（HTTP Live Streaming）技术的基本原理，m3u8文件的构成，并提供了使用hls.js在React中播放m3u8流的步骤。注意，由于HLS技术特性，浏览器会持续请求新的媒体段，导致控制台显示不断发送请求，这是正常现象。在组件销毁时要记得清理资源，防止不必要的网络请求。
项目上有一个播放实时视频（直播）的需求，后端童鞋直接传过来一个类似 https://...️️/live.m3u8的视频流地址。让我自行播放，拿到地址的我一脸懵逼，下面开始我的探索(baidu)之路。
HLS（HTTP Live Streaming）
介绍.m3u8之前得先介绍一下HLS技术，HLS是苹果公司提出的，官方给出的简介如下：
使用Apple的HTTP实时流媒体（HLS）技术，将实时和点播的音频和视频发送到iPhone，iPad，Mac，Apple TV和PC。 使用与Web相同的协议，HLS允许您使用普通Web服务器和内容交付网络部署内容。 HLS旨在提高可靠性，并通过针对可用的有线和无线连接速度优化回放来动态适应网络条件。
HLS将音频和视频作为一系列小文件发送，通常持续时间约为6秒，称为媒体段文件。 索引文件或播放列表提供媒体段文件的URL的有序列表。 HLS的索引文件保存为M3U8播放列表，这是用于MP3播放列表的M3U格式的扩展名。 客户端访问索引文件的U
最低0.47元/天 解锁文章
1547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
