`
johnson_gong
  • 浏览: 12282 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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/

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics