话题
文章列表
程柳锋 HTML&h5
[https://qpic.url.cn/feeds_pic/ajNVdqHZLLDiaFm5KhPnOxlvDkjDeFcicIlaqJaNTib2IkCnfb0uHgbTQ/] 由腾讯专业直播团队IVWEB匠心打造,聚焦全行业视频、直播、图像处理等领域的交流和技术创新大会再度来袭。本次TLC大会主题涵盖 AI 人体姿态识别、NBA直播系统千万高并发架构、春节期间最热门的在线答题方案剖析,更有当下最热门的移动端 Google Flutter、RN和小程序在直播中的实践场景。本次大会,我们邀请了国内外16名直播行业专家,他们来自Instagram、腾讯、YY、声网、熊猫直播、陌陌、即构科技等国内外知名直播/视频领域企业,这将是一场视频领域的嘉年华。 本次大会将于8月18日在深圳科兴科学园国际会议中心隆重开幕,我们静候您的到来,与您分享更多精彩盛宴! 举办方介绍 IVWEB团队成立于2015年,参与了腾讯在线教育战略产品 腾讯课堂 ,QQ群活动等项目的研发工作,团队创立之初是负责腾讯互动视频应用开发,花样直播,花样交友。目前主要负责腾讯移动直播产品 NOW直播平台研发工作。 ...显示全部
5 天前发表 106次浏览 0条评论 0次收藏
villainthr HTML&h5
全面进阶 H5 直播 精品推荐
视频格式?编码? 如果我们想要理解 HTML5 视频,首先需要知道,你应该知道,但你不知道的内容?那怎么去判断呢? ok,很简单,我提几个问题即可,如果某些童鞋知道答案的话,可以直接跳过。 1. 你知道 ogg,mp4,flv,webm(前面加个点 . )这些叫做什么吗? 2. 那 FLV,MPEG-4,VP8 是啥? 3. 如果,基友问你要片源,你会说我这是 mp4 的还是 MPEG-4 的呢? 当然,还有一些问题,我这里就不废话了。上面主要想说的其实就两个概念: 视频文件格式 [https://zh.wikipedia.org/wiki/视频文件格式] (容器格式), 视频编解码器 [https://zh.wikipedia.org/wiki/视频编解码器] (视频编码格式)。当然,还有另外一种,叫做音频编解码器。简而言之,就是这三个概念比较重要: * 视频文件格式(容器格式) * 视频编解码器(视频编码格式) * 音频编解码器(音频编码格式) ...显示全部
1 年前发表 4218次浏览 2条评论 0次收藏
link ,除了分享,也是知识管理。 HTML&h5
自从TLC大会结束之后,就不断有同学来咨询视频回放和讲师PPT何时放出?[https://qpic.url.cn/feeds_pic/ajNVdqHZLLBbic9icuj9NWZCqLzibNTAE4OkBDLWfKuwVt0e1qZjKaXeA/] 往下翻有惊喜↓↓↓ TLC大会视频回放: http://www.itdks.com/dakashuo/playback/1479 [http://www.itdks.com/dakashuo/playback/1479] 视频回放 [https://qpic.url.cn/feeds_pic/ajNVdqHZLLDHpnt7ZSlCzcLNV4gvUfcAMc0CxngFx4C0IeJqEBX7Aw/] TLC大会讲师PPT: https://github.com/iv-web/ppts/tree/master/TLC_ppts [https://github.com/iv-web/ppts/tree/master/TLC_ppts] ...显示全部
8 个月前发表 1448次浏览 0条评论 0次收藏
villainthr HTML&h5
js的设计模式是针对于整体代码的设计是否合理,给出了一些具体的解决办法。 而重构代码就是依赖于设计模式而实现的一个必要手段,可以说设计模式就是重构代码的目标,但他的手段却不仅仅只有设计模式这些大而全的,同样存在小而精,我们随处可以使用的。 封装功能块代码 我们通常在写代码的时候,一开始,并不需要考虑太多。在后期可以进行修改和提炼。 比如,我有个业务需求,是创建一个div并且渲染数据到页面上,并且根据data的不同,改变div的状态. function(data){ var div = document.createElement("div"), div = data.name; document.body.append(div); if(data.isShow){ div.style.display = "block"; }else{ div.style.display = "none"; } } ...显示全部
10 个月前发表 1430次浏览 0条评论 0次收藏
高磊 HTML&h5
背景 当前互联网时代,技术门槛越来越低,人人都可以建立并生成各式各样,多元化、多样化的站点。 文档站点一般作为各行各业领域内的知识技术介绍及使用的资料站点,可提高资料的使用效率,保证资料的质量。 目前市面上有大致这么几款主流的文档生成站点,分别为 docsify 、 gitbook 、 Phenomic 等,可帮助用户快速搭建文档站点。 今天我们详细介绍下docsify的使用文档及实现原理。 介绍 docsify是由现饿了么前端团队 @elemeFE [https://github.com/elemefe] 的cinwell.li编写的一套文档站点生成框架,github上已有3k+ star,这款框架和其他框架如gitbook等相比,最大的区别就在于 docsify不是静态生成html,而通过动态请求markdown编译生成html 。 docsify还具有轻应用、全文搜索功能、支持多个主题、兼容IE10+、支持SSR等特性。 DOCSIFY-CLI快速入手 ...显示全部
10 个月前发表 2145次浏览 1条评论 0次收藏
villainthr HTML&h5
SW-ROUTER image.png-2kB [http://static.zybuluo.com/jimmythr/wbmnfy7hah7qzjrzq8mhm7x5/image.png] PWA 全称是 Progressive Web Apps 。它的目的就是让你的网页越来越快。主要内容可以参考: PWA-cookbook [https://github.com/JimmyVV/PWA-cookbook/wiki/PWA-guider] 。不过,它上手的难度也是有的。它本身是基于 worker 而发展出 Service Worker,所以,要使用 PWA 你就必须学会如何使用 SW,然后,SW 里面还有很多坑要踩。而其中最大的坑就是,如何处理文件资源的缓存,这个一直都是 CS 领域的心病。当然,在 SW 中,这也是有点困难的。不过,为了大家能更快的掌握 SW 这里,鄙人写了一个关于处理 fetch 事件的路由分发库 sw-router [https://github.com/JimmyVV/sw-router] 。 这里也主要介绍一下它。 下载 ...显示全部
1 年前发表 1890次浏览 0条评论 0次收藏
villainthr HTML&h5
在几年前,天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太 心累了. 有了ajax之后, 网页的性能可大幅提升,告别刷新,告别如水的流量. 不过,长江后浪推前浪,一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置,云服务资源的存储 没办法充分利用. 所以,业界想到另外一种方法--JSONP. JSONP实际上和ajax没有半点关系,唯一相同的就是都是异步执行,而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在,正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢? 改呗~ 所以,紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序. * ajax * JSOP * SSE * websocket ok~ 进入主题吧~ AJAX 相信这个应该不用过多的讲解了吧. 差不多就4步: ...显示全部
1 年前发表 1966次浏览 0条评论 0次收藏
villainthr HTML&h5
TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。 例如:路径动画 gif [http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif] 图形渐变: fig [http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif] 线条动画: test.gif-388.2kB [http://static.zybuluo.com/jimmythr/ctsujbawcdlyqpcslean3jvx/test.gif] 以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点: image.png-7.1kB [http://static.zybuluo.com/jimmythr/v37ft0wq7elij74vaq9vlt99/image.png] ...显示全部
1 年前发表 2157次浏览 1条评论 0次收藏
villainthr HTML&h5
SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。 如何书写 开篇说过,SVG 就是一个 XML。看一下代码吧: <svgx="0px"y="0px"width="450px"height="100px"viewBox="0 0 450 100"><rectx="10"y="5"fill="white"stroke="black"width="90"height="90"/><circlefill="white"stroke="black"cx="170"cy="50"r="45"/><polygonfill="white"stroke="black"points="279,5 294,35 328,40 303,62 ...显示全部
1 年前发表 2694次浏览 2条评论 0次收藏
villainthr HTML&h5
Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到。 老铁,没毛病 那什么情况会用到呢? * canvas * websocket * file * fetch * webgl * ... 上面只是列了部分内容。现在比较流行的就是音视频的处理,怎么说呢? 如果,有涉及直播的话,那么这应该就是一个非常!非常!非常!重要的一块内容。我这里就不废话了,先主要看一下里面的基础内容。 整体架构 首先,一开始我们是怎么接触到底层的 bit 流呢? 记住:只有一个对象我们可以搞到 bit 流 --> ArrayBuffer 这很似曾相识,例如在 fetch 使用中,我们可以通过 res.arrayBuffer(); 来直接获取 ArrayBuffer 对象。websocket 中,监听 message ,返回来的 event.data 也是 arraybuffer。 let socket = new WebSocket('ws://127.0.0.1:8080'); socket.binaryType = 'arraybuffer'; ...显示全部
1 年前发表 1926次浏览 0条评论 0次收藏
王少飞 HTML&h5
启用硬件加速 1 在chrome的地址栏中输入 chrome://settings/ 回车 [http://shaofei.wang/content/images/2017/04/QQ--20170408192029.png] 2 滚动页面到地步,点击 ==显示高级设置== [http://shaofei.wang/content/images/2017/04/QQ--20170408192219.png] 3 再次滚动到页面地步,找到 ==使用硬件加速模式== [http://shaofei.wang/content/images/2017/04/QQ--20170408192255.png] 开启GUP硬件加速 1 在chrome的地址栏中输入 chrome://flags/#disable-accelerated-video-decode 找到==硬件加速的视频解码==,点击==启用== [http://shaofei.wang/content/images/2017/04/QQ--20170408192649.png] 完成上面两步后重启浏览器。 ...显示全部
1 年前发表 3278次浏览 0条评论 0次收藏
villainthr HTML&h5
市面上现在流行两种沙箱模式,一种是使用iframe,还有一种是直接在页面上使用new Function + eval进行执行. 殊途同归,主要还是防止一些Hacker们 吃饱了没事干,收别人钱来 Hack 你的网站. 一般情况, 我们的代码量有60%业务+40%安全. 剩下的就看天意了. 接下来,我们来一步一步分析,如果做到在前端的沙箱.文末 看俺有没有心情放一个彩蛋吧. 直接嵌套 这种方式说起来并不是什么特别好的点子,因为需要花费比较多的精力在安全性上. EVAL执行 最简单的方式,就是使用eval进行代码的执行 eval('console.log("a simple script");'); 但,如果你是直接这么使用的话, congraduations... do die... 因为,eval 的特性是如果当前域里面没有,则会向上遍历.一直到最顶层的global scope 比如window.以及,他还可以访问closure内的变量.看demo: functionAuth(username) { var password = "trustno1"; ...显示全部
1 年前发表 1916次浏览 0条评论 0次收藏