首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

腾讯课堂 H5 直播点赞动效实现

前言 以前在看微信视频号直播的时候,经常点击右下角的点赞按钮。看着它的数字慢慢从一位数变成五位数,还是挺有氛围感的。特别是长按的时候,有个手机震动的反馈,很带感。...直到前阵子投入腾讯课堂 H5 直播的需求,需要自己去实现一个这样的效果时,才开始摸索。 先看看最后的效果: 相比视频号的点赞动效,轨迹复杂了很多。...可以看到课堂直播的这一段点赞动效,大概分为这么三个阶段: 从无到有,在上升过程中放大成正常大小 上升过程中左右摇曳,且摇曳的幅度随机 左右摇曳上升的过程中,渐隐并缩小 在动手之前,我先想到了使用 CSS...3.1 画布创建 首先我们读取一个 Canvas 元素的 id,并通过 getContext 获取它的上下文。...我们用一个 start 函数来生成点赞动画,每当调用它时,都会创建一个 render 方法,并塞入一个 renderList。

80730
您找到你想要的搜索结果了吗?
是的
没有找到

H5直播源码是什么?H5直播源码如何开发?

H5直播源码是什么? H5直播也有着一套完整的直播系统,含视频录制端、视频播放端、视频服务器端。...H5直播,推流还是需要移动端或者摄像头,H5直播源码提供更多的依旧是观看,其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势? 做品牌宣传的朋友都知道,H5是一个重要的表现方式。...H5直播源码研发周期较短,尤其强化了web网页的表现性能。 除了微信之外,不少浏览器都可用H5观看视频,所以相对flash而言,不需要安装插件,所以传播更快。...H5相比flash而言,对CPU及内存的占用都要低一些,所以能够有效减少卡顿及发烫的现象。 想要搭建H5直播源码,WebRTC必不可少。...怎么用H5直播源码开发直播功能 直播一共有三种状态:直播前,直播中,结束。 针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示。

2K20

全面进阶 H5 直播

市面上,最常用的是 Apple 推出的 HLS 直播协议(原始支持 H5 播放),当然,还有 RTMP、HTTP-FLV、RTP等。...关于 HLS 的详细内容,可以参考:HLS 详解 关于 m3u8 文件的标签内容,可以参考:HLS 标签头详解 总而言之,HLS 之所以能这么流行,关键在于它的支持度是真的广,所以,对于一般 H5 直播来说...不过,由于支持性的原因,RTMP 并未在 H5 直播中,展示出优势。...但,由于手机端上不支持,所以,H5 的 HTTP-FLV 也是一个痛点。不过,现在 flv.js 可以帮助高版本的浏览器,通过 mediaSource 来进行解析。...MS 的创建 创建一个 MS: var mediaSource = new MediaSource(); 相关方法 addSourceBuffer() 该是用来返回一个具体的视频流,接受一个 mimeType

2.5K33

B站直播协议指南

文章目录[隐藏] 协议头 请求 进入房间、心跳包 响应 弹幕、送礼、进入提示、开始直播、准备直播 直播人数 2017/2/10: 截止目前的文章版本已经回退到最初版本,不一定会继续填坑。...最近因为一些原因,所以在研究B站直播相关的内容。结合逆向的Android客户端源码,我得以更深的了解B站直播的协议。...协议头 一般的,一个B站的直播间数据包的协议头为16字节。...响应 弹幕、送礼、进入提示、开始直播、准备直播 这些数据包的数据包类型是相同的(都是5),而返回格式大体相同: {"cmd":"..."...直播人数 直播人数包的数据类型为3。这个包一般在客户端发送心跳包以后返回。正文部分只有一个整数,就是直播当前人数。

1.8K10

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。...面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后,我们也想把这些问题和解决方法总结下来,让其他同学做到直播的时候可以自豪的说,这就是我们的h5直播体验 1....如果发现在x5内核下无法使用伪全屏而被浏览器接管,可以咨询下x5同事为你的域名开启白名单,不接管你域名下的视频播放 总结: 在经历过各种优化和调整后,我们可以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物...现在的h5的播放还有很多的表现和兼容性的问题,希望这份指南可以帮你在遇到同样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D

5.3K130

H5 直播避坑指南

本文来自“小时光茶社(Tech Teahouse)”公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。...导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后,我们也想把这些问题和解决方法总结下来,让其他同学做到直播的时候可以自豪的说,这就是我们的h5直播体验 1....页面内联播放问题 在iOS Safari和一些安卓的一些浏览器下播放视频的时候,不能在h5页面中播放视频,系统会自动接管视频 如果需要在h5页面内播放视频,需要在视频标签上加上 webkit-playsinline...如果发现在x5内核下无法使用伪全屏而被浏览器接管,可以咨询下x5同事为你的域名开启白名单,不接管你域名下的视频播放 总结: 在经历过各种优化和调整后,我们可以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物

2.7K90

语音直播系统源码直播场功能开发

相比真人视频形态的直播方式,语音直播系统源码因为不需要露脸、不需要颜值,一定程度上则为用户降低了直播的门槛,这一优势也将会吸引更多的用户成为主播,而收听直播的用户也可以不再需要只停留在直播间内,在操作体验上将更加方便用户可以边听语音直播边做其他事...语音1(1).jpg 语音直播系统源码直播场景所需的功能如下: 多麦位语聊:房间内支持多人连麦及无限观众收听,并将麦位状态同步给房间内所有用户;自定义房间配置:房间参数可以按需配置,如码率、麦位数等...语音直播系统源码语音直播功能列表,实现不同类型语音聊天室的音频聊天功能。...相较视频直播,语音直播系统源码KAIF 更适合用户碎片化的场景,伴随性的直播内容受众更广泛。...但是随着泛娱乐化的到来,直播行业新鲜不在,而声音越来越受到年轻一代的欢迎,语音直播或许会成为未来直播社交行业新的增长点。

77420

全面进阶 H5 直播(下)

本文作者:ivweb villainthr 接 《 全面进阶 H5 直播(上)》 Media Source Extensions 在没有 MSE 出现之前,前端对 video 的操作,仅仅局限在对视频文件的操作...中间有个需要注意的点,MS 的实例通过 URL.createObjectURL() 创建的 url 并不会同步连接到 video.src。...创建实例都是同步的,但是底层流和 video.src 的连接时异步的。MS 提供了一个sourceopen 事件给我们进行这项异步处理。...MS 的创建 创建一个 MS: var mediaSource = new MediaSource(); 相关方法 addSourceBuffer() 该是用来返回一个具体的视频流,接受一个 mimeType...MS 的状态 当 MS 从创建开始,都会自带一个readyState 属性,用来表示其当前打开的状态。

5.6K10

全面进阶 H5 直播(上)

详细参考:视频文件格式 直播协议 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 来进行解析。

9.4K2215

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 | 导语 企鹅电竞项目,直播和视频播放是其中的核心。...面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...在摸索优化背后,我们也想把这些问题和解决方法总结下来,让其他同学做到直播的时候可以自豪的说,这就是我们的h5直播体验 1....如果发现在x5内核下无法使用伪全屏而被浏览器接管,可以咨询下x5同事为你的域名开启白名单,不接管你域名下的视频播放 总结: 在经历过各种优化和调整后,我们可以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物...现在的h5的播放还有很多的表现和兼容性的问题,希望这份指南可以帮你在遇到同样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D

10.8K151

AI进了直播,这画风666

两个机器人的“唠嗑”直播 在全球著名的游戏社区 Twitch 上,出现了一个名为“seebotschat(看机器人聊天)”的直播室。...解说机器人直播侃球 人工智能机器人不仅能唱跳聊只为博你一笑,还能正儿八经地在B站开起了球赛解说直播。巴西奥运会中的澳大利亚与立陶宛的篮球赛,杨毅就约战人工智能“度秘”,直播侃球。...AI让直播不那么辣眼睛 网络直播是个筐,什么都能往里装,久而久之,画风就开始辣眼睛了。 袒胸露乳、极端暴力、虐待动物、自虐、自杀……各种没有下限的低俗猎奇恶趣味,尺度之大让人三观尽毁。...读芯君开扒 用AI净化直播空间,无奈的治标不治本 直播乱象让直播平台一直饱受争议,最近的360水滴直播事件、吴永宁死亡众筹事件又一次把直播推上了风口浪尖。...读芯君认为,用AI带来更好的直播体验,是直播平台保持竞争力的利益诉求,用AI净化直播空间,对于改善社会风气也尤为迫切,但——治标不治本。

2.1K80

深夜直播免费看球的秘密……

粉丝群里,主播发布了免费观看直播的网址。 ?...图:网络赌球引流路径 来源:腾讯防水墙 整个引流路径最大的特点是由免费球赛直播网站的主播为赌球网站引流,直播的盛行为赌球注入了鲜明的“时代特色”。...短视频平台——>粉丝聊天群:短视频平台上经常有“十佳进球”、“十大球星”、“赛事片段”等短视频合集,也有解说员或球迷在直播和大家讨论球赛,喜欢看球的人经常可以刷到。...热门视频的评论、直播的弹幕、UP主的个人简介、社交平台的推文评论中经常会有观看盗版免费赛事转播的网站,而有些在平台开设了粉丝群的解说员(主播)会在群里公布自己在盗版转播网站的直播地址。...图:黑产团伙抽水比例 来源:腾讯防水墙 为了帮助更多正规直播平台和短视频平台的用户避免重蹈小A君的覆辙,腾讯防水墙推出“直播风控”系统,可精准识别直播账号风险,有效打击不良账号和违法行为,防止黄赌毒等不良内容影响人们的日常生活和企业的正常运营

2.4K30

EasyDSS如何通过接口新增虚拟直播并推送到直播

流平台EasyDSS里有个直播的类型叫虚拟直播,虚拟直播直播源有两种类型,一个是点播资源,一个是在线资源。点播资源可以从EasyDSS里的点播服务里面去配置,在线资源必须是直播的源地址。...image.png 当然根据某些项目的需要,我们也可以通过接口来实现虚拟直播的推送,本文我们就分享一下EasyDSS如何通过接口新增一个虚拟直播并且推送到直播。...1、首先,先调用easydss登录接口: image.png 2、然后创建一个新的直播: image.png 3、接着再调用post请求去添加一个虚拟直播,并且配置流的信息推送到之前创建直播上面...: image.png 4、然后就推送成功了,虚拟直播和在线直播都可以看了。...以下为虚拟直播观看: image.png 以下为在线直播观看: image.png

63620

无 Flash 时代,让直播拥抱 H5

直播是脱离于文字、图片来说,另外一种社交的方式。各大平台也在深耕这一领域,淘宝直播,花椒,映客,Now 直播,企鹅电竞。...本人就职于腾讯 Now 直播前端开发,感觉直播能够尝试的领域真的太多太多,但是,Web 在这块一直是一个痛点。...而且,根据 8 月份腾讯财报内容,直播贡献的收入增长的飞快。现在,我们也想让 Web 体会一把能够实时观看直播的方式,这应该怎么做呢?...在没有 MSE 的时候,直播形式要么在 flash 中播放,要么在客户端播放,要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有,而且 H5 播放的延时性还非常高。...因为,MSE 的主要工作是可以创建 media stream,并且喂给 video/audio 进行播放。从此,前端可以和写 C++ Java 的人有了共同的话题--二进制流的操作。

1.4K40
领券