html5 视频设置全屏

HTML5是一种新的网络编程语言，它不仅可以用来创建网页，还可以嵌入多媒体元素。其中，视频是网页中使用频率较高的元素之一。HTML5中，通过使用video元素就可以很方便地向网页中添加视频了。而且，通过HTML5，我们还可以很容易地实现全屏播放视频。

下面我们来看看如何在HTML5中设置视频全屏。

video id="myVideo" controls width="400" height="300">
    source src="my-video.mp4" type="video/mp4">
    source src="my-video.webm" type="video/webm">
    source src="my-video.ogg" type="video/ogg">
    您的浏览器不支持video标签。/video>
    button onclick="toggleFullScreen()">
    全屏/button>
    script>
function toggleFullScreen() {
    var videoElement = document.getElementById("myVideo");
    if (!document.fullscreenElement &
    &
     !document.mozFullScreenElement &
    &
     !document.webkitFullscreenElement &
    &
 !document.msFullscreenElement) {
if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
}
 else if (videoElement.msRequestFullscreen) {
    videoElement.msRequestFullscreen();
}
 else if (videoElement.mozRequestFullScreen) {
    videoElement.mozRequestFullScreen();
}
 else if (videoElement.webkitRequestFullscreen) {
    videoElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
 else {
if (document.exitFullscreen) {
    document.exitFullscreen();
}
 else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}
 else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
 else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
}
}
}
    /script>
    

上面的代码中，我们首先创建了一个video元素，并为其添加了多个source子元素，以便在各种浏览器中都可以播放视频。然后，在代码的末尾，我们添加了一个button元素，并为其添加了onclick事件，用于触发全屏播放视频的函数toggleFullScreen()。

最后，我们在JavaScript中定义了toggleFullScreen()函数，用于切换视频的全屏状态。在函数中，我们首先获取了video元素，然后判断当前的全屏状态。如果当前不是全屏状态，我们就通过videoElement.requestFullscreen()方法请求进入全屏状态。而如果当前已经是全屏状态，我们就调用document.exitFullscreen()方法退出全屏状态。

通过以上方法，我们就可以很方便地在HTML5中设置视频全屏了。你可以复制上述代码片段并尝试在自己的网页中使用。祝你编程愉快！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！