文章关键字 ‘HTML5’

从天猫某活动视频不必要的3次请求说起

2018年12月24日,星期一

天猫

我们在移动端做H5开发的时候,有时候会用到MP4视频,对于一些酷效果,是性价比最高的方式。然而,很多前端开发在使用这些视频的时候没有注意,或者根本就不知道视频的某些信息的位置会影响浏览器的请求个数,从而影响网页性能。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日,星期六

backdrop头图

backdrop这个单词是背景幕布,就是戏曲表演后面的一块布。::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。在web中哪些元素需要视觉聚焦呢?一个是HTML5 <video>视频元素,还有就是HTMl5.2 <dialog>元素,以及处于全屏状态下的普通元素。这些元素的背景样式均可以交给::backdrop伪元素进行控制。

阅读全文…

使用wavesurfer.js显示mp3 audio音频的波形图

2018年12月9日,星期日

波形图

如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

阅读全文…

HTML5 video视频播放Picture-in-Picture画中画技术

2018年12月2日,星期日

视频画中画技术

Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。实际上,这里的画中画要比当前视频网站的画中画要更强,强在其是一个客户端层面的接口,小视频窗口是操作系统窗体级别的,就算你的浏览器切换到其他选项卡页面,或者最小化,也会在你电脑右下角播放视频。

于是乎,我们可以一边码代码一边看网页小视频了!

阅读全文…

数学标记语言MathML简介、工具及兼容

2018年10月24日,星期三

MathML头图缩略图

MathML指“数学标记语言”,是XML语言的一个子集,用来在web网页,甚至部分软件中显示数学公式。

简言之,就是使用特殊的类似HTML的标记在网页中显示数学公式。因为有些数学公式很复杂,普通HTML根本没法驾驭,然而MathML本身也很复杂,真要手写那真要人命了,好在有很棒的工具可以帮助我们……

阅读全文…

揭秘视频网站video视频倍速播放的实现

2018年07月14日,星期六

B站,或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言,是很有用的,说夸张点是延长了我们的生命,哈哈哈。

对于一个靠技术吃饭人,总免不了关注点在技术实现上,究竟是如何实现的呢?且看~

阅读全文…

炫酷H5中序列图片视频化播放的高性能实现

2018年05月1日,星期二

很多爆款H5的一些酷酷的场景变换很多都是视频实现的,但是,视频的实现也有局限,如iOS下不能自动播放,动态数据不支持等,此时又当如何处理呢?

我们可以使用序列图片,通过JS脚本,来模拟视频播放效果,以上所有局限将通通可以规避。实现的方法很多,但是很多平时可以的方法在这种场景下会有性能跟不上的问题,那有没有什么高性能的实现方法呢?有……

阅读全文…

借助HTML5 details,summary无JS实现各种交互效果

2018年01月15日,星期一

HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日,星期日

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

HTML5 file API加canvas实现图片前端JS压缩并上传

2017年07月30日,星期日

很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!

阅读全文…