文章关键字 ‘视频’

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

2018年12月2日,星期日

视频画中画技术

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

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

阅读全文…

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

2018年07月14日,星期六

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

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

阅读全文…

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

2018年05月1日,星期二

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

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

阅读全文…

玩转HTML5 Video视频WebVTT字幕使用样式与制作

2018年03月22日,星期四

HTML5 Video视频支持支持外挂字幕,文件后缀名是.vtt,称为WebVTT格式,专门的web字幕格式。使用很简单,用一个<track>元素即可。并且字幕的样式是可以控制的。

阅读全文…

让所有浏览器支持HTML5 video视频标签

2010年03月17日,星期三

HTML5 video标签可以让视频如同图片那样使用一个标签就可以轻轻松松地嵌入到页面上,然而目前只有Safari之类的浏览器支持,主流的IE浏览器是路边的电线杆——靠边站。然而,优秀的技术先驱们,发动他们的智慧,通过一个js,实现了所有浏览器下都可以使用video标签,本文就是将如何使用使得所有的主流浏览器都支持HTML5 video标签,提供必要的截图,提供demo页面,提供原JavaScript文件下载,希望能对您的学习有所帮助。

阅读全文…

CSS实现圆角六色渐变自适应按钮详解

2009年11月21日,星期六

本文将要展示如何用纯css实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理,将代码形象化,提供demo,希望您可以充分了解这种技术,也希望能开阔您的思维,对您的工作与学习有所帮助。

阅读全文…