Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。实际上，这里的画中画要比当前视频网站的画中画要更强，强在其是一个客户端层面的接口，小视频窗口是操作系统窗体级别的，就算你的浏览器切换到其他选项卡页面，或者最小化，也会在你电脑右下角播放视频。
于是乎，我们可以一边码代码一边看网页小视频了！
文章关键字 ‘video’
HTML5 video视频播放Picture-in-Picture画中画技术
2018年12月2日，星期日揭秘视频网站video视频倍速播放的实现
2018年07月14日，星期六B站，或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言，是很有用的，说夸张点是延长了我们的生命，哈哈哈。
对于一个靠技术吃饭人，总免不了关注点在技术实现上，究竟是如何实现的呢？且看~
玩转HTML5 Video视频WebVTT字幕使用样式与制作
2018年03月22日，星期四HTML5 Video视频支持支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。使用很简单，用一个<track>元素即可。并且字幕的样式是可以控制的。
使用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文件下载，希望能对您的学习有所帮助。
我的应用
我的应用