欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5 video fullscreen 全屏

程序员文章站 2022-07-15 14:22:51
...

背景:

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

 

方案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/