这几天闲着没事就捣鼓了下h5直播项目，运用到了html5+css3+jquery+iscroll+wlsPop等技术进行架构开发，解决了直播界面聊天键盘撑起问题，新增了动画消息提示及礼物。...如果你刚好需要一些练手的项目，希望对你有用~ 很早之前就想写一个html5直播项目练练手，但是由于工作的关系，一直没有真正的开动（其实就是懒）。...好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个h5仿陌陌直播项目。...h5直播webapp，主要实现的内容如下： [004-360截图20181104095737443.png] 005-360截图20181104095812016.png 006-360截图20181104100100390
H5直播源码是什么？ H5直播也有着一套完整的直播系统，含视频录制端、视频播放端、视频服务器端。...H5直播，推流还是需要移动端或者摄像头，H5直播源码提供更多的依旧是观看，其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势？ 做品牌宣传的朋友都知道，H5是一个重要的表现方式。...H5直播源码研发周期较短，尤其强化了web网页的表现性能。 除了微信之外，不少浏览器都可用H5观看视频，所以相对flash而言，不需要安装插件，所以传播更快。...H5相比flash而言，对CPU及内存的占用都要低一些，所以能够有效减少卡顿及发烫的现象。 想要搭建H5直播源码，WebRTC必不可少。...怎么用H5直播源码开发直播功能 直播一共有三种状态：直播前，直播中，结束。 针对每个状态我们肯定会有不同的显示，这三种状态可以是三个页面，相互切换，或者一个页面，控制页面相关隐藏和显示。
没有Flash了怎么做直播？ 答案是：PC用H5。 为什么不说客户端？因为客户端上早就没有Flash，不会问这个问题。客户端上浏览器，比如微信的浏览器，如果要播放直播可以用HLS。...PC怎么用H5呢？本质上有两个技术： MSE：目前很成熟的技术，是js的解码器，把MP4格式的文件，送到MSE解码播放。...做直播不太成熟，是因为它本身不是干这个的，有些逻辑不太一样比如录制，另外通信比直播复杂太多了，所以如果只是做直播的话，肯定是不推荐上这么高难度骚操作的。...WebRTC是做通信的，不是用来做直播。在直播业务中，目前并没有经过大规模的验证，配套的东西也不如直播这么完善，比如微信小程序就没法用WebRTC了。...HLS，PC上用hls.js，Safari、iOS、Android可以H5直接播。 WebRTC，PC上用H5（得自己写代码调API），移动端得用SDK。 各位收好，不谢。
市面上，最常用的是 Apple 推出的 HLS 直播协议（原始支持 H5 播放），当然，还有 RTMP、HTTP-FLV、RTP等。...关于 HLS 的详细内容，可以参考：HLS 详解 关于 m3u8 文件的标签内容，可以参考：HLS 标签头详解 总而言之，HLS 之所以能这么流行，关键在于它的支持度是真的广，所以，对于一般 H5 直播来说...不过，由于支持性的原因，RTMP 并未在 H5 直播中，展示出优势。...但，由于手机端上不支持，所以，H5 的 HTTP-FLV 也是一个痛点。不过，现在 flv.js 可以帮助高版本的浏览器，通过 mediaSource 来进行解析。...具体可以参考：abort 使用 上面主要介绍了处理音视频流需要用的 Web 技术，后面章节，我们接入实战，具体来讲一下，如何做到使用 MSE 进行 remux 和 demux。
没有Flash了怎么做直播？ 答案是：PC用H5。 为什么不说客户端？ 因为客户端上早就没有Flash，不会问这个问题。客户端上浏览器，比如微信的浏览器，如果要播放直播可以用HLS。...PC怎么用H5呢？本质上有两个技术： MSE：目前很成熟的技术，是js的解码器，把MP4格式的文件，送到MSE解码播放。...做直播不太成熟，是因为它本身不是干这个的，有些逻辑不太一样比如录制，另外通信比直播复杂太多了，所以如果只是做直播的话，肯定是不推荐上这么高难度骚操作的。...WebRTC是做通信的，不是用来做直播。在直播业务中，目前并没有经过大规模的验证，配套的东西也不如直播这么完善，比如微信小程序就没法用WebRTC了。...HLS，PC上用hls.js，Safari、iOS、Android可以H5直接播。 WebRTC，PC上用H5（得自己写代码调API），移动端得用SDK。 引用 SRS开源服务器
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。...面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1....如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物...现在的h5的播放还有很多的表现和兼容性的问题，希望这份指南可以帮你在遇到同样的坑时能尽快爬出来，并优化你的h5播放体验，吸引到更多的用户 : D
本文来自“小时光茶社（Tech Teahouse）”公众号 作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。...导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1....页面内联播放问题 在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频 如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline...如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物
本文作者：ivweb villainthr 接 《 全面进阶 H5 直播（上）》 Media Source Extensions 在没有 MSE 出现之前，前端对 video 的操作，仅仅局限在对视频文件的操作...具体可以参考：abort 使用 上面主要介绍了处理音视频流需要用的 Web 技术，后面章节，我们接入实战，具体来讲一下，如何做到使用 MSE 进行 remux 和 demux。
详细参考：视频文件格式 直播协议 2016 年是直播元年，一是由于各大宽带提供商顺应民意增宽降价，二是大量资本流进了直播板块，促进了技术的更新迭代。...市面上，最常用的是 Apple 推出的 HLS 直播协议（原始支持 H5 播放），当然，还有 RTMP、HTTP-FLV、RTP等。...关于 HLS 的详细内容，可以参考：HLS 详解 关于 m3u8 文件的标签内容，可以参考：HLS 标签头详解 总而言之，HLS 之所以能这么流行，关键在于它的支持度是真的广，所以，对于一般 H5 直播来说...不过，由于支持性的原因，RTMP 并未在 H5 直播中，展示出优势。下列是简单的对比： HTTP-FLV HTTP-FLV 和 RTMPT 类似，都是针对于 FLV 视频格式做的直播分发流。...但，由于手机端上不支持，所以，H5 的 HTTP-FLV 也是一个痛点。不过，现在 flv.js 可以帮助高版本的浏览器，通过 mediaSource 来进行解析。
可能已经有不少人试过在liveedu.tv上做编程直播了。两个多月前，这个网站又推出了“教程类”的直播项目。...目前，这个网站上已经上线的premium project不算很多，也暂时没有看到国内直播者的身影。那么，应该如何做好优质项目直播呢？ 选好项目的题材 从题材上看，游戏开发是一个热门的选题。...坚持维护项目的质量 据介绍，只要了具备了一定条件的直播者用户都可以创建塔premium project。这个网站也会有专门的工作人员为直播者提供帮助。...虽然直播的项目并不是一个教程，但你仍然可以观看他的直播，明白程序员是如何解决实际的问题，或是怎样在一个商业游戏中增加新的功能， 如何创建一个大项目。...结语 一旦成为premium project项目的直播者，严格按照制定的直播计划来做直播这是非常重要的。这也是优质项目的直播者有别于普通项目直播者的地方。
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 | 导语 企鹅电竞项目，直播和视频播放是其中的核心。...面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1....如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物...现在的h5的播放还有很多的表现和兼容性的问题，希望这份指南可以帮你在遇到同样的坑时能尽快爬出来，并优化你的h5播放体验，吸引到更多的用户 : D
直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。...在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。...13 业务实践 到这里，相信大家已经对直播流所需要的技术都已经了解，我们接下来主要来实践一下 MSE 在 H5 播放器中具体的应用和实践。...H5 播放器所需的流程其实就两个环节： websocket 提供原始的直播流。比如，RTMP 的直播流，或者 WS-FLV 的直播流。...本篇文章大概整体分析了一遍 H5 直播需要了解的基本技术。不过，这并不是全部，还有直播协议的相关优化，视频格式的解码分析，浏览器视频调试等等。
直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。...本人就职于腾讯 Now 直播前端开发，感觉直播能够尝试的领域真的太多太多，但是，Web 在这块一直是一个痛点。...而且，根据 8 月份腾讯财报内容，直播贡献的收入增长的飞快。现在，我们也想让 Web 体会一把能够实时观看直播的方式，这应该怎么做呢？...MSE 的出现，不仅能让 Web 接上直播，而且还可以根据协议自己控制相关的延迟率。 那直播，又和我们今天的主题 MSE/video 有啥关系呢？...在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。
到目前，h5似乎已经成为品牌宣传最重要的表现方式。h5技术开发简单，研发周期短，且成本低廉。...尤其强化了web网页的表现性能，通过h5技术搭建的直播系统不仅能够在网页实现高清流畅播放，还能加入很多的交互功能。下面，我们就针对h5直播源码做一些技术扫盲。...一、h5直播源码中的关键技术点：WebRTC 想要搭建h5直播系统，WebRTC必不可少。WebRTC即网页即时通信，是一个支持网页浏览器进行实时语音对话或视频对话的开源API。...这些预定的引擎配置为h5直播源码提供了强悍的技术基础。不过，WebRTC只是应用于视频录制，视频播放还得需要HLS的支持。 timg.jpg 二、什么是HLS协议？.m3u8是干啥用的？...以上就是关于h5直播源码的一些技术扫盲点。
---- 直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。...本人就职于腾讯 Now 直播前端开发，感觉直播能够尝试的领域真的太多太多，但是，Web 在这块一直是一个痛点。...而且，根据 8 月份腾讯财报内容，直播贡献的收入增长的飞快。现在，我们也想让 Web 体会一把能够实时观看直播的方式，这应该怎么做呢？...在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。...后面几篇内容将是关于 H5 直播技术的一整个系列。 另外，腾讯 TLC 直播大会 5 折票只剩 3 天！！！ 如果对直播感兴趣的同学，可以快速下手，今年没了，估计只能等明年的。
本期，我们邀请了腾讯SNG Web前端开发工程师——吕鸣，为大家分享《H5 视频直播那些事》。...内容大体框架: 怎样利用H5来播放直播视频 怎样录制直播视频 怎样实时上传直播视频 直播中的用户交互 分享人介绍： 吕鸣 目前在腾讯SNG担任手Q的web前端开发工作 博客：http://www.nihaoshijie.com.cn...可以看到，直播从 PC 到一直发展到移动端，越来越多的直播类 App 上线，同时移动直播进入了前所未有的爆发阶段，但是对于大多数移动直播来说，还是要以 Native 客户端实现为主，但是 H5 在移动直播端也承载着不可替代的作用...，例如 H5 有着传播快，易发布的优势，同时最为关键的时 H5 同样可以播放直播视频。...所以 H5 在整个直播中，还是有着重要的地位的！
rtmp协议时adobe公司开发的开放协议，hls是苹果公司推出的直播协议。...我们使用nginx的rtmp插件来搭建推流服务器 基于nginx的rtmp直播服务器 安装加载nginx-rtmp-module模块的nginx 首先下载nginx 到 https://github.com...[1594282941784.png] 使用video.js在h5播放rtmp 使用obs推流，推流地址可以填写rtmp://ip:9999/myapp或者rtmp://ip:9999/live，如果用的时...rtmp://ip:9999/myapp，在h5端播放的时候会涉及到h5播放rtmp协议的问题，h5安装vide.js之后还要额外安装videojs-flash插件。...但问题是现在流行的时移动端直播，而苹果就没支持过flash播放器，所以目前正常方法解决不了在移动端使用rtmp协议拉流的问题。
今年的FIFA世界杯甚是精彩，最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室，该h5聊天室采用750px全新伸缩flex布局，以及使用rem响应式配合fontsize.js，页面弹窗则是使用自己开发的
rtmp协议是adobe公司开发的开放协议，hls是苹果公司推出的直播协议。...我们使用nginx的rtmp插件来搭建推流服务器 基于nginx的rtmp直播服务器 安装加载nginx-rtmp-module模块的nginx 首先下载nginx 到 https://github.com...1594282941784.png 使用video.js在h5播放rtmp 使用obs推流，推流地址可以填写rtmp://ip:9999/myapp或者rtmp://ip:9999/live，如果用的是...rtmp://ip:9999/myapp，在h5端播放的时候会涉及到h5播放rtmp协议的问题，h5安装vide.js之后还要额外安装videojs-flash插件。...但问题是现在流行的是移动端直播，而苹果就没支持过flash播放器，所以目前正常方法解决不了在移动端使用rtmp协议拉流的问题。
所以，本文主要给大家介绍一下当下 HTML5 直播所涵盖的技术范围，如果要深度学习每一个技术，我们后续可以继续讨论。 直播协议 直播是 16 年搭着短视频热火起来的。...它的业务场景有很多，有游戏主播，才艺主播，网上教学，群体实验（前段时间，有人直播让观众来炒股）等等。不过，根据技术需求的划分，还可以分为低延迟和高延迟的直播，这里就主要是协议选择的问题。...这对一些对实时性比较高的场景，比如运动赛事直播来说非常蛋疼。这里，我们来细分的看一下每个协议。 HLS HLS 全称是 HTTP Live Streaming。这是 Apple 提出的直播流协议。...当然，现在由于 mediaSource 的普及，自定义一个播放器也没有多大的难度，这样就可以保证直播延迟性的同时，完成直播的顺利进行。...有兴趣的同学，可以继续深入了解，我的另外一篇博客：全面进阶 H5 直播。 当然，如果后期有机会，可以继续来实现以下如何进行实际的编码。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
