任何人都可以帮助这个。我被建议设置我的文件，如下图所示，点击一个图像触发HTML5全屏视频，但未显示，但我收到了一个功能错误。我需要包含一些库吗？它似乎没有重新确定命令requestFullscreen。
<body>
<div class="slide" id="">
<img src="../root/img/gc_small.png" id="videoPlay" style="margin:200px 0 0 0;">
</div>
<video autoplay loop muted controls="false" id="myVideo" style="width:800px;">
<source src="video/portal.mp4" type="video/mp4">
</video>
</body>
JS
<script type="text/javascript">
$(function() {
$('#videoPlay').on('click', function(event) {
event.preventDefault();
$('#myVideo').requestFullscreen();
});
});
</script>
这是我最近用于我的项目的东西
$(document).ready(function () {
var myVideo = $("video", _self)[0];
openFullscreen(myVideo)
})
function openFullscreen(myVideo) {
console.log("hitting")
var elem = myVideo
console.log(elem)
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}您可以使用此代码，因为我使用此代码工作：
<!doctype html>
<html lang="en">
<head>
<title>FullScreen</title>
<meta charset="utf-8">
<style></style>
</head>
<body onLoad="onload();">
<video id="element">
<source src="video1.mp4"></source>
</video>
<a href="#" id="fullscreen">Go Fullscreen</a>
<script>
var element = document.getElementById('element');
var fullscreen = document.getElementById('fullscreen');
fullscreen.addEventListener('click',function(){
<!--console.log ('it is working'); -->
if(element.requestFullscreen){
element.requestFullscreen();
}
else if (element.webkitRequestFullscreen){
element.webkitRequestFullscreen();
}
else if (element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if (element.msRequestFullscreen){
element.msRequestFullscreen();
}
});
</script>
</body>
</html>