文章关键字 ‘video’

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

2017年09月10日,星期日

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

阅读全文…

半深入理解CSS3 object-position/object-fit属性

2015年03月15日,星期日


现代web显示环境万变,响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局(任意宽度水平自适应)都比较常见,结果,在处理这些有着固定尺寸的元素的时候,就会遇到障碍,例如,一个2:1的视频,永远要等比例充满容器,但是,随着浏览器宽度不一样,容器的长宽比有可能小于2,也有可能大于2. 你说,你能轻松实现小于比例2时候,视频宽度100%;比例大于2的时候,高度100%吗?

显然,很麻烦,最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求,object-fit和object-position才应运而生……

阅读全文…

HTML5终极备忘大全(图片版+文字版)

2011年03月31日,星期四

顾名思意,本文内容算是个小炒,备忘录。主要备忘HTML5的一些内容,从元素到事件,到浏览器支持等。非图片版和文字版,图片版方便收藏,文字版方便传播与即时浏览。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译-10件Flash可以做而HTML5做不了的事情

2010年11月9日,星期二

HTML5可以说是Flash目前最大的潜在的对手,HTML5是否会终结Flash时代是个争议颇多的话题。本文作者通过10个实例展示了目前Flash可以做但是HTML5却无能为力的例子,借此说明Flash离死亡还尚早。到底Flash是垂死挣扎,还是会在困境中前行,这还需要你自己睿智的判断了。
本文实例可以说展示了Flash一些新的且比较强大的应用。无论你是Flash开发者,设计师,还是web方面的工程师,此为对于了解HTML5和Flash的一些特性,功能等还是很有帮助的。翻译能力有限,有些句子的意思自己确实拿不准,所以,要是要翻译不准确的地方,还望见谅,欢迎指正。希望本文能对您的学习有所帮助。

阅读全文…

翻译-你必须知道的28个HTML5特征、窍门和技术

2010年08月27日,星期五

前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。
本文为翻译内容,介绍了28个HTML5相关的技术,知识点等。内容较多,不少内容,我都重新制作了demo页面,并配以截图,希望能对您的学习有所帮助。

阅读全文…

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

2010年03月17日,星期三

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

阅读全文…