我成功地使用HTML 5视频标签和jQuery以全屏模式打开视频以响应事件(点击,按键)。如何在页面加载时以全屏模式打开视频而不是onclick?任何帮助,将不胜感激。非常感谢!
我的HTML:
<div id="video_container>
<video id="video1" width="1280" height="720" controls autoplay>
<source src="videos/ballet.mp4" type="video/mp4">
<source src="videos/ballet.webm" type="video/webm">
<source src="videos/ballet.ogv" type="video/ogg">
</video>
</div>
我的JavaScript:
$(document).ready(function(){
$('#video1').bind("playing", function(){
var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
$('#video1').bind("ended", function(){
$("#video_container").hide();
});
});
听起来你不能在页面加载时使视频全屏,至少不适用于webkit浏览器。根据Safari开发者库:
只能在响应用户操作(例如单击按钮)时调用webkitEnterFullscreen()方法。例如,您无法调用webkitEnterFullscreen()来响应加载事件。