视频直播前端方案

EasonTyler 发布于2019-07-16 16:14 / 274人阅读

摘要：视频直播前端方案南洋流媒体本质上是现实的图像，经过编码器压缩，持久化为点播文件或者直播流，经过传输，在终端解码和展示。简称是开发的一套视频直播协议，现在属于。

视频直播前端方案

@(南洋)

流媒体本质上是：现实的图像，经过编码器压缩，持久化为点播文件或者直播流，经过传输，在终端解码和展示。

http live streaming（hls）

适用移动端
HTTP Live Streaming（HLS）是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。

由于大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议，所以在移动端非常适合使用HLS协议进行直播。

上图所示的m3u8格式就是支持HLS协议的流媒体格式。

使用方法也非常简单，直接在html中嵌入一个video标签及可。

值得注意的是hls在pc端仅仅支持safari浏览器（因为就是苹果实现的hls技术），所以在类似chrome浏览器上是无法看到视频的。即使在chrome的调试器中模拟移动端还是无法播放视频。

这里推荐一个播放m3u8格式文件的网站，只要将视频地址扔到这个网站，就能播放。http://osmfhls.kutu.ru/

video标签拥有很多属性、事件以及方法。http://www.w3school.com.cn/ta...
包含play() pause()等等，这些原生事件方法就能脱离原生video样式，打造独一的风格。

这里推荐一个教程，如何用css3实现自己风格的播放器。http://www.inserthtml.com/201...

另外再提及一点webkit-playsinline属性，在video中增加这个属性，用户在微信App中的webview中打开视频不会进入默认的全屏播放模式，若我们给播放器设置了宽200高200，在有这个属性的前提下打开视频，高宽还是200。

之前有谈到hls协议的视频直播格式无法再pc端播放，但现有许多video库可以结合flash实现m3u8格式的视频在pc端各大浏览器播放。
https://github.com/johndyer/m...
https://github.com/videojs/vi...
https://github.com/jwplayer/j...

RTMP Real Time Messaging Protocol

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端ios h5页面播放是它的硬伤。

虽然无法再ios的H5页面播放，但是对于ios原生应用是可以自己写解码去解析的。而且rtmp延迟低，我们公司就采用了rtmp协议。

在pc浏览器端，HTML5video标签无法播放rtmp协议的视频，所以还是需要借用flash去播放。

之前提到的几个video库都可以实现这样的效果，这里就video.js为例。

youtube pc端html5实现方法

待

借鉴

https://imququ.com/post/html5...

对我以上的理解有疑问和意见的欢迎找我私聊~微博-写前端的暹罗

私有云云服务器前端方案前端解决方案前端视频前端项目视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/34669.html

前端工程师做Face Detection

摘要：身为一名前业务程序员和现前端程序员，这样的功能还是陌生的领域。需求使用加摄像头，通过人脸检测，完成自动拍照功能。在的屏幕上，显示摄像头的实时画面，要是画面中检测出人脸，则触发拍照。这样做的效果能够获得更高的，同时还能完成更远距离脸部的捕获。因为项目原因，需要使用人脸检测（face detection）功能。身为一名前JAVA业务程序员和现前端程序员，这样的功能还是陌生的领域。那能不能...

nodejh 2019-08-20 14:33 评论0 收藏0
移动直播之路 - 收藏集 - 掘金

摘要：本篇是解密视频直播技术系列之四推流和传移动开发关于视频直播技术，你想要知道的都在这里了五延迟优化掘金七牛云于月底发布了一个针对视频直播的实时流网络和完整的直播云解决方案，很多开发者对这个网络和解决方案的细节和使用场景非常感兴趣。开发直播 app 中要了解的原理 - Android - 掘金前言：每个成功者多是站在巨人的肩膀上！在做直播开发时碰到了很多问题，在收集了许多人博客的基础上...

番茄西红柿 2019-06-25 11:16 评论0 收藏0
移动直播之路 - 收藏集 - 掘金

摘要：本篇是解密视频直播技术系列之四推流和传移动开发关于视频直播技术，你想要知道的都在这里了五延迟优化掘金七牛云于月底发布了一个针对视频直播的实时流网络和完整的直播云解决方案，很多开发者对这个网络和解决方案的细节和使用场景非常感兴趣。开发直播 app 中要了解的原理 - Android - 掘金前言：每个成功者多是站在巨人的肩膀上！在做直播开发时碰到了很多问题，在收集了许多人博客的基础上...

aikin 2019-06-25 16:11 评论0 收藏0
移动直播之路 - 收藏集 - 掘金

摘要：本篇是解密视频直播技术系列之四推流和传移动开发关于视频直播技术，你想要知道的都在这里了五延迟优化掘金七牛云于月底发布了一个针对视频直播的实时流网络和完整的直播云解决方案，很多开发者对这个网络和解决方案的细节和使用场景非常感兴趣。开发直播 app 中要了解的原理 - Android - 掘金前言：每个成功者多是站在巨人的肩膀上！在做直播开发时碰到了很多问题，在收集了许多人博客的基础上...

yzzz 2019-07-16 16:16 评论0 收藏0
技术详解：实现互动直播全过程

摘要：对于聊天室本身的聊天功能的实现，因为接入云信，主要是通过调用封装实现的，就不细说了。云信的互动直播功能，支持主播和观众实时连麦互动。本文主要整理互动直播中各端的逻辑，重点是与前端相关的教师端IM的部分和Web/Wap学生端。希望通过这份整理，对于前端在维护时可以尽快的理解互动直播的流程，提高项目的可维护性；对于客户端和教师端来说，可以了解到前端提供的接口和消息的实现。也能提高对整个请...

airborne007 2019-07-16 16:21 评论0 收藏0