Html5全屏视频

Question

有没有办法做到这一点？我想全屏播放视频.没有浏览器.设置width:100%; height:100%;保持浏览器可见

Answer 1

不,还没有办法做到这一点.我希望他们在浏览器中添加这样的未来.

编辑:

现在有一个用于Web的全屏API您可以requestFullscreen在视频或画布元素上要求用户为您提供permisions并使其全屏显示.

让我们考虑一下这个元素:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

我们可以使用以下脚本将该视频置于全屏模式:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

完整文档

Answer 2

来自CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Answer 3

全部欢呼HTML5 _ /\_

var videoElement = document.getElementById('videoId');    
videoElement.webkitRequestFullScreen();

Answer 4

这是使用我使用的Fullscreen API和RequestFullscreen方法的一种非常简单的方法（3 行代码），它兼容所有流行的浏览器：

var elem = document.getElementsByTagName('video')[0];
var fullscreen = elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
fullscreen.call(elem); // bind the 'this' from the video object and instantiate the correct fullscreen method.

浏览器兼容性： MDN & Can I use