html5 video fullscreen 全屏

背景:

打开网页，视屏就 全屏 显示。

 

方案1 (js + html5)：

通过javascript获取video的DOM对象，并设置相关属性(例如: <video autoplay controls loop>)，

调用相关API方法(如: requestFullScreen; mozRequestFullScreen; webkitRequestFullScreen;)

 

方案2 (html5 + css):

video { 

  position: fixed;

  right: 0;

  bottom: 0;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

}

注意: 

a. min-width: 100% 跟 width: 100% 画面渲染效果是不同的, min-height也是。

b. 有的视频文件有被 方案2 "强制"全屏后，画面的像素/ 清晰度会受到影响。

 

参考资料：

http://www.w3cschool.cc/

http://codepen.io/