Web 前端如何播放 HLS(.m3u8) 视频
2017-10-09 22:25
387 查看
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 格式的视频:
参考代码:
PC端需要通过其他手段(videojs-contrib-hls)来解码 .m3u8 格式的视频, 才能够通过 <video> 标签或者 flash 来播放
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>
PC端需要通过其他手段(videojs-contrib-hls)来解码 .m3u8 格式的视频, 才能够通过 <video> 标签或者 flash 来播放
相关文章推荐
- 视频直播技术之HLS 如何播放m3u8格式
- Android如何离线播放加密(HLS)m3u8视频——实现HLS缓存
- 前端如何播放m3u8格式的视频
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
- Android如何让WebView中的HTML5页面实现视频全屏播放
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
- Android的WebView如何播放视频
- Web前端视频播放及视频的云存储
- EasyNVR H5无插件直播方案前端构建之:如何播放HLS
- [视频播放] HLS协议之M3U8、TS流详解
- 如何下载HLS视频到本地(m3u8)
- Android的WebView中如何播放视频
- android 如何实现webview(h5)的视频播放
- web下视频播放
- Web前端开发视频教程
- MediaPlayer类可用于控制音频/视频文件或流的播放。关于如何使用这个类的方法还可以阅读VideoView类的文档。
- $ webview html5 自动播放视频 $
- Web前端性能优化——如何提高页面加载速度
- 如何安装使用web前端的包管理器bower
- 500G python web、爬虫、数据分析、机器学习、大数据、前端实战项目视频代码免费分享