Web 前端如何播放 HLS(.m3u8) 视频_html5 m3u8_HugoforAndroid的博客

HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. Unfortunately, all the major desktop browsers except for Safari are missing HLS support.

WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好

移动端 iOS 和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频, HLS 在 PC 端仅支持safari浏览器，类似chrome浏览器使用HTML5 video标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案

移动端 可直接通过 <video> 标签来播放 .m3u8 格式的视频:

参考代码：

<video class="vjs-tech" width="100%" height="100%"
    controls="controls" autoplay="autoplay"
    x-webkit-airplay="true" x5-video-player-fullscreen="true"
    preload="auto" playsinline="true" webkit-playsinline
    x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8">
</video>
                    HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. Unfortunately, all the major desktop browsers except for
[AS3]什么是M3U8,与HTML5的区别是什么,M3U8是苹果专用的“视频格式”；HTML5是一种“网页编码格式”。两者属性不同
1：M3U8是苹果专用的“视频格式”；HTML5是一种“网页编码格式”。两者属性不同
2：M3U8视频只能苹果设备访问，即苹果设备才能解码此类视频；而HTML5是开放的，苹果设备、安卓设备都能访问
3：“iPad模式”只是用“iPad的
				在 HTML5 中，你可以使用 <video> 标签来播放 m3u8 视频。你可以将 m3u8 视频的 URL 指定为 video 标签的 src 属性。例如：
<video src="http://example.com/video.m3u8" controls></video>
你也可以使用第三方的播放器库来播放 m3u8 视频，比如 Hls.js。你可以...
				这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。
m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
				vue，html5 使用video视频播放 支持mp4 m3u8格式,移动端自动播放
video是html5自带的标签可以在vue中直接使用，使用的方式也很简单
//播放m3u8
<video id="videoM3u8" class="vjs-tech" controls autoplay="autoplay" width="960" height="400">
        <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" t
				场景：HTML5页面需要通过<video>标签播放一段200M的服务器视频，默认会需要先下载完视频后才播放，有较长的等待时间;
解决方案：前端通过videojs-contrib-hlsjs.min.js来控制<video>标签进行播放m3u8视频流播放。
1：服务端视频video.mp4生成video.ts视频数据包，执行如下命令：
ffmpeg -y -i /deploys/html/statics/video/video.mp4 -vcodec ...
				转载：http://blog.sina.com.cn/s/blog_4ae178ba01015hx1.html
           http://blog.sina.com.cn/s/blog_4ae178ba01015hwz.html
YouTube已经支持HTML5嵌入。YouKu目前全站支持HTML5，不过嵌入代码还是Flash的。抽空分析了下HTML5下的播放地址，很简单。
				HLS（m3u8）web页面和手机播放案例。
1.HLS视频服务器需要配置可跨域文件（crossdomain.xml）
可参考https://www.jianshu.com/p/59a5d22a24c6
2.项目需要用tomcat或iis等服务器加载
3.讲index.html中的视频地址换成自己的地址即可
 这是用于解析和生成用于Internet视频翻译的HTTP Live Streaming（Apple HLS）中使用的M3U8播放列表的最完整的开源库。
 M3U8是简单的文本格式，并且解析库也必须很简单。 它不提供通过HTTP播放HLS或处理播放列表的方法。 因此，库功能是：
 支持HLS规范，直到协议的版本5。
 解析和生成主播放列表和媒体播放列表。
 自动将输入流检测为主设备或媒体播放列表。
 提供用于保留播放列表元数据的结构。
 加密密钥支持与等DRM系统一起使用。
 支持非标准的标签。
 该库受BSD 3条款许可保护。 全文请参见。 GPL v3涵盖了0.8及更低版本。 许
	微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
	说说视频编码格式、视频码率、视频帧率、分辨率的概念
	原创教程：带ppt课件和讲师画面的教学视频录制完整教程
	如何做电视节目的视频直播（电视台节目直播）
	做视频直播时如何测试本地网络的上行带宽(网速测试)
	usb摄像头做教学直播实现pc和手机都可以..
				前端使用video.js组件放置m3u8流视频时，遇到了无法播放的问题。这个问题可能有多种原因导致，下面是一些常见原因和解决方案。
首先，检查m3u8文件是否正确。m3u8文件是分段视频流的索引文件，可能存在错误或格式不正确的情况导致播放失败。可以通过使用HLS工具进行验证和修复，如hls.js或videojs-contrib-hls。
其次，检查播放器是否支持HLS协议。如果播放器不支持HLS协议，那么无论使用什么方法播放m3u8流视频都会失败。可以使用支持HLS协议的播放器，如video.js自带的hls.js插件，或使用第三方插件，如videojs-contrib-hls插件，来播放m3u8视频流。
还有一种可能是服务器不支持m3u8格式。在这种情况下，需要配置服务器，使其支持m3u8格式的视频流。可以通过安装和配置一个流媒体服务器，如nginx-rtmp进行实现。
最后，检查网络连接是否稳定。如果网络连接不稳定，m3u8流视频可能无法成功加载和播放。可以尝试使用更加稳定的网络，或者使用等待时间更长的加载器来等待视频加载完全后再开始播放。
总之，在播放m3u8流视频时，需要仔细检查各种可能的原因和解决方案，以保证视频能够正常加载和播放。