Question

是否可以在页面加载时将视频设置为全屏？

到目前为止，我能够解决的唯一答案是对我来说合乎逻辑的是通过CSS设置元素的宽度和高度。

var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )

html{font-family:arial;}
#video{width:100%;height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

我使用Popcorn.js在启动时播放视频。

我知道从JavaScript设置CSS类。我更感兴趣的是问题：是否有基于JavaScript的方法来调用，以最大化视频到全屏（启动时）。

使用JavaScript，正如Will所建议的那样，我似乎无法让它正常工作

var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
    vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
}

html{font-family:arial;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

HTML5视频onStart全屏

0 个答案: