- 综合排序
- 最热优先
- 最新优先
- 来自专栏h5
h5直播webapp项目开发|h5直播案例
这几天闲着没事就捣鼓了下h5直播项目，运用到了html5+css3+jquery+iscroll+wlsPop等技术进行架构开发，解决了直播界面聊天键盘撑起问题，新增了动画消息提示及礼物。 如果你刚好需要一些练手的项目，希望对你有用~ 很早之前就想写一个html5直播项目练练手，但是由于工作的关系，一直没有真正的开动（其实就是懒）。 好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个h5仿陌陌直播项目。 h5直播webapp，主要实现的内容如下： [004-360截图20181104095737443.png] 005-360截图20181104095812016.png 006-360截图20181104100100390 onTap() { wcPop.close(sixinIdx); } }, { text: '发送', style: 'color: #23ade5;
9.1K83发布于 2018-11-04 - 来自专栏用户7603185的专栏
H5直播源码是什么？H5直播源码如何开发？
H5直播源码是什么？ H5直播也有着一套完整的直播系统，含视频录制端、视频播放端、视频服务器端。 H5直播，推流还是需要移动端或者摄像头，H5直播源码提供更多的依旧是观看，其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势？ 做品牌宣传的朋友都知道，H5是一个重要的表现方式。 H5直播源码研发周期较短，尤其强化了web网页的表现性能。 除了微信之外，不少浏览器都可用H5观看视频，所以相对flash而言，不需要安装插件，所以传播更快。 H5相比flash而言，对CPU及内存的占用都要低一些，所以能够有效减少卡顿及发烫的现象。 想要搭建H5直播源码，WebRTC必不可少。 怎么用H5直播源码开发直播功能 直播一共有三种状态：直播前，直播中，结束。 针对每个状态我们肯定会有不同的显示，这三种状态可以是三个页面，相互切换，或者一个页面，控制页面相关隐藏和显示。
2.8K20发布于 2021-03-04 - 来自专栏腾讯IVWEB团队的专栏
全面进阶 H5 直播
详细参考：视频文件格式 直播协议 2016 年是直播元年，一是由于各大宽带提供商顺应民意增宽降价，二是大量资本流进了直播板块，促进了技术的更新迭代。 市面上，最常用的是 Apple 推出的 HLS 直播协议（原始支持 H5 播放），当然，还有 RTMP、HTTP-FLV、RTP等。 现在，直播行业依旧很火，而 HTML5 直播，一直以来都是一个比较蛋疼的内容。一是，浏览器厂商更新速度比较慢，二是，这并不是我们前端专攻的一块，所以，有时候的确很鸡肋。当然，进了前端，你就别想着休息。 关于 HLS 的详细内容，可以参考：HLS 详解 关于 m3u8 文件的标签内容，可以参考：HLS 标签头详解 总而言之，HLS 之所以能这么流行，关键在于它的支持度是真的广，所以，对于一般 H5 直播来说 不过，由于支持性的原因，RTMP 并未在 H5 直播中，展示出优势。
3.4K33发布于 2020-06-27 - 来自专栏全栈程序员必看
Red5搭建直播平台
下载地址 http://www.red5.org/ 1, 首先启动red5 2,访问http://localhost:5080/ 3,在该页面点击installer,进入安装页面。 5.1,重新编译Application.java package org.red5.demos.oflaDemo; import org.red5.logging.Red5LoggerFactory ; import org.red5.server.adapter.ApplicationAdapter; import org.red5.server.api.IConnection; import org.red5.server.api.IScope; import org.red5.server.api.stream.IServerStream; import org.red5.server.api.stream.IStreamCapableConnection org.red5.server.api.IConnection; import org.red5.server.api.IScope; import org.red5.server.api.stream.IServerStream
2.5K20编辑于 2022-08-04 - 来自专栏腾讯IVWEB团队的专栏
全面进阶 H5 直播（下）
本文作者：ivweb villainthr 接 《 全面进阶 H5 直播（上）》 Media Source Extensions 在没有 MSE 出现之前，前端对 video 的操作，仅仅局限在对视频文件的操作
6.4K10发布于 2017-07-13 - 来自专栏腾讯IVWEB团队的专栏
全面进阶 H5 直播（上）
详细参考：视频文件格式 直播协议 2016 年是直播元年，一是由于各大宽带提供商顺应民意增宽降价，二是大量资本流进了直播板块，促进了技术的更新迭代。 市面上，最常用的是 Apple 推出的 HLS 直播协议（原始支持 H5 播放），当然，还有 RTMP、HTTP-FLV、RTP等。 现在，直播行业依旧很火，而 HTML5 直播，一直以来都是一个比较蛋疼的内容。一是，浏览器厂商更新速度比较慢，二是，这并不是我们前端专攻的一块，所以，有时候的确很鸡肋。当然，进了前端，你就别想着休息。 关于 HLS 的详细内容，可以参考：HLS 详解 关于 m3u8 文件的标签内容，可以参考：HLS 标签头详解 总而言之，HLS 之所以能这么流行，关键在于它的支持度是真的广，所以，对于一般 H5 直播来说 不过，由于支持性的原因，RTMP 并未在 H5 直播中，展示出优势。下列是简单的对比： HTTP-FLV HTTP-FLV 和 RTMPT 类似，都是针对于 FLV 视频格式做的直播分发流。
10.4K2215发布于 2018-01-15 - 来自专栏腾讯Bugly的专栏
H5 直播避坑指南
本文来自“小时光茶社（Tech Teahouse）”公众号 作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1. 注： 之前我们发现x5插入了一段js来劫持视频的全屏的事件 ? 满足条件的video标签全屏时都会被X5接管，另外调用webkitEnterFullscreen方法时，X5也会接管播放器。 如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物
4K90发布于 2018-03-23 - 来自专栏Technology Share
H5直播避坑指南
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。 面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1. 方法时，X5也会接管播放器。 如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物
6.9K130发布于 2018-01-15 - 来自专栏Technology Share
H5直播避坑指南
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 | 导语 企鹅电竞项目，直播和视频播放是其中的核心。 面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这就是我们的h5直播体验 1. 注： 之前我们发现x5插入了一段js来劫持视频的全屏的事件 ? 满足条件的video标签全屏时都会被X5接管，另外调用webkitEnterFullscreen方法时，X5也会接管播放器。 如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物
12.3K151发布于 2018-01-29 - 来自专栏音视频咖
无 Flash 时代，让直播拥抱 H5
直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。 在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。 13 业务实践 到这里，相信大家已经对直播流所需要的技术都已经了解，我们接下来主要来实践一下 MSE 在 H5 播放器中具体的应用和实践。 H5 播放器所需的流程其实就两个环节： websocket 提供原始的直播流。比如，RTMP 的直播流，或者 WS-FLV 的直播流。 本篇文章大概整体分析了一遍 H5 直播需要了解的基本技术。不过，这并不是全部，还有直播协议的相关优化，视频格式的解码分析，浏览器视频调试等等。
3.4K50编辑于 2023-04-17 - 来自专栏直播那些事儿
关于h5直播源码的技术扫盲
尤其强化了web网页的表现性能，通过h5技术搭建的直播系统不仅能够在网页实现高清流畅播放，还能加入很多的交互功能。下面，我们就针对h5直播源码做一些技术扫盲。 一、h5直播源码中的关键技术点：WebRTC 想要搭建h5直播系统，WebRTC必不可少。WebRTC即网页即时通信，是一个支持网页浏览器进行实时语音对话或视频对话的开源API。 这些预定的引擎配置为h5直播源码提供了强悍的技术基础。不过，WebRTC只是应用于视频录制，视频播放还得需要HLS的支持。 timg.jpg 二、什么是HLS协议？.m3u8是干啥用的？ 三、直播延迟往往不可避免 前面提到，HLS协议是将直播流分成一段一段的视频去下载播放的。假设列表里面的包含5个TS文件，每个TS文件包含5秒的视频内容，那么整体的延迟就是25秒。 以上就是关于h5直播源码的一些技术扫盲点。
2.5K20发布于 2020-03-11 - 来自专栏前端小吉米
无 Flash 时代，让直播拥抱 H5
直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。 本人就职于腾讯 Now 直播前端开发，感觉直播能够尝试的领域真的太多太多，但是，Web 在这块一直是一个痛点。 而且，根据 8 月份腾讯财报内容，直播贡献的收入增长的飞快。现在，我们也想让 Web 体会一把能够实时观看直播的方式，这应该怎么做呢？ MSE 的出现，不仅能让 Web 接上直播，而且还可以根据协议自己控制相关的延迟率。 那直播，又和我们今天的主题 MSE/video 有啥关系呢？ 在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。
1.9K40发布于 2018-07-03 - 来自专栏（新）书籍专栏
【愚公系列】《AI+直播营销》005-品牌入局直播，必做5个规划（直播定位：让直播风格契合品牌调性）
要想把直播业务做起来，品牌方的直播团队需要做好直播定位、用户画像、运营管理、营销策划、定价设计这5个方向的准备工作。一、直播定位：让直播风格契合品牌调性直播间该如何装修？主播该穿什么、如何展示产品？ 直播团队应顺应这种认知模式，通过提炼品牌关键词来锚定直播风格。2.1核心原则：聚焦3个关键词大多数用户能轻松说出的品牌关键词约3-5个，新品牌则通常不超过3个。 5.赋能工具：如何运用AI辅助直播定位？AI在品牌营销领域的巨大价值已经成为共识。AI工具的应用极大地提升了品牌营销的效率，节省了大量人力和脑力成本。 5一位细心体贴的妻子，为加班丈夫准备夜宵。便携式小杯装酸奶，搭配谷物棒。温馨的书房，电脑屏幕微亮，旁边放着暖心的点心。6幼儿园老师，组织孩子们进行“健康食物”分享。 3．输出适合AI绘图工具的5条指令。
37520编辑于 2026-01-17 - 来自专栏FreeBuf
【直播预约】双直播间首次启用 | CIS大会夏日版5天后见
※倒计时5天，各路专家齐祝福CIS大会夏日版圆满成功 FreeBuf视频号已开启直播预约，欢迎点击下方卡片预约直播，CIS大会夏日版官方网站也正式上线，点击「阅读原文」即可跳转官网。 ，如果有感兴趣的议题内容，敬请锁定直播间！ ※如果已在CIS粉丝群 无需重复进群 02 互动：Summer Live直播间首次启用 「CIS大会夏日版·Summer Live」将首次采用双直播间模式，除了虚拟实景直播间发布精彩议题外，Summer Live直播间将在中午12点准时上线。 CIS大会夏日版纪念T恤，FB呼呼扇、FB网安宇宙手提袋等精品好礼也已在直播间预留，参与互动收看直播即可免费将好礼带回家。 ※直播福利一览 还有5天，CIS大会夏日版将正式与各位见面。
1.1K20编辑于 2023-03-30 - 来自专栏晓月寒·
搭建直播系统并实现h5播放rtmp
rtmp协议是adobe公司开发的开放协议，hls是苹果公司推出的直播协议。 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插件。 ] }) 在pc端播放rtmp时依赖flash播放器，所以要打开flash，这样就解决了pc端rtmp协议直播流的问题。 但问题是现在流行的是移动端直播，而苹果就没支持过flash播放器，所以目前正常方法解决不了在移动端使用rtmp协议拉流的问题。
7.2K20发布于 2020-07-13 - 来自专栏前端小吉米
无 Flash 时代，让直播拥抱 H5（一）
---- 直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。 本人就职于腾讯 Now 直播前端开发，感觉直播能够尝试的领域真的太多太多，但是，Web 在这块一直是一个痛点。 而且，根据 8 月份腾讯财报内容，直播贡献的收入增长的飞快。现在，我们也想让 Web 体会一把能够实时观看直播的方式，这应该怎么做呢？ 在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。 后面几篇内容将是关于 H5 直播技术的一整个系列。 另外，腾讯 TLC 直播大会 5 折票只剩 3 天！！！ 如果对直播感兴趣的同学，可以快速下手，今年没了，估计只能等明年的。
1.3K50发布于 2018-07-03 - 来自专栏腾讯Bugly的专栏
【Dev Club 分享】H5 视频直播那些事
本期，我们邀请了腾讯SNG Web前端开发工程师——吕鸣，为大家分享《H5 视频直播那些事》。 可以看到，直播从 PC 到一直发展到移动端，越来越多的直播类 App 上线，同时移动直播进入了前所未有的爆发阶段，但是对于大多数移动直播来说，还是要以 Native 客户端实现为主，但是 H5 在移动直播端也承载着不可替代的作用 ，例如 H5 有着传播快，易发布的优势，同时最为关键的时 H5 同样可以播放直播视频。 3.HLS 直播延时: 我们知道 hls 协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个 ts 文件，每个 TS 文件包含5秒的视频内容，那么整体的延迟就是25秒。 所以 H5 在整个直播中，还是有着重要的地位的！
2.5K71发布于 2018-03-23 - 来自专栏腾讯Bugly的专栏
HTML 5 视频直播一站式扫盲
视频直播这么火，再不学就 out 了。 为了紧跟潮流，本文将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但不限于前端技术。 1. H5 到底能不能做视频直播？ 简单讲就是把整个流分成一个个小的，基于 HTTP 的文件来下载，每次只下载一些，前面提到了用于 H5 播放直播视频时引入的一个 .m3u8 的文件，这个文件就是基于 HLS 协议，存放视频流元数据的文件 HLS 直播延时 我们知道 hls 协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个 ts 文件，每个 TS 文件包含5秒的视频内容，那么整体的延迟就是25秒。 在 html5 页面进行播放直播视频？ 坑点总结 简根据以上步骤，笔者写了一个 demo，从实现 ios 视频录制，采集，上传，nginx 服务器下发直播流，h5 页面播放直播视频者一整套流程，总结出以下几点比较坑的地方： 1 在使用 AVCaptureSession
5.7K81发布于 2018-03-23 - 来自专栏晓月寒·
搭建直播系统并实现h5播放rtmp
rtmp协议时adobe公司开发的开放协议，hls是苹果公司推出的直播协议。 [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插件。 ] }) 在pc端播放rtmp时依赖flash播放器，所以要打开flash，这样就解决了pc端rtmp协议直播流的问题。 但问题是现在流行的时移动端直播，而苹果就没支持过flash播放器，所以目前正常方法解决不了在移动端使用rtmp协议拉流的问题。
9.1K20发布于 2020-07-09 - 来自专栏用户4669341的专栏
分析一下H5直播、微信直播、抓玩偶、低延时的方案
微信直播,HTML5直播,主要方案有如下几种： 1,基于hls切片直播，前前是应用的主流,服务器可以选fms,wowza,nginx,srs之类 优点：集成方便，支持度高，兼容性好，主流手都支持，是目前直播技术主流 4，基于WebSocket技术自建流服务直播， 优点：低延时，超低，可控在1秒内（测试在0.2秒左右），兼容好，所有html5手机平台通吃。 缺点：要自建流服务， 自建低延时娃娃机直播 测试了一下效果还不错：http://m.ovsyun.com:8082/play/ 方案：RTMP摄像机-->自建(流服务网关）-->h5和微信端(可以同时rtmp 到cdn上，专门针对直播娃娃机开通了“超低延迟”模式，公网毫秒级延迟).
4K00发布于 2019-03-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号