safari html5 自动全屏,html - Safari html5 video fullscreen size

本文介绍了如何使用CSS的webkit-full-screen属性为视频创建全屏功能，并提供自定义控制器。通过将视频和控制面板放入一个div容器中，然后应用全屏样式。同时，针对Safari浏览器可能出现的问题，提供了修复CSS样式。此外，还通过jQuery和JavaScript代码展示了全屏API的使用，以实现全屏的进入和退出操作。文章最后提到了如何添加画中画功能的相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

As @Jack say we need to use the CSS -webkit-full-screen

I think you wanna have you're own customized controller right? In that case, we need to put the control panel and the video inside a div, and use the full-screen on that. Let's us just call it videoContainer

First we make the HTML

Your browser does not support the video tag.

CSS

.videoContainer:fullscreen, .videoContainer:-ms-fullscreen, .videoContainer:-moz-full-screen, .videoContainer:-webkit-full-screen {

width: 100%;

height: 100%;

}

Sometimes it can be buggy (bug in Safari) so a way to fix that is to add a style to the default control.

video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container {

display: none !important;

opacity: 0;

}

This will style Safari's normal controllers, and make sure they don't show and make it's kinda awkward.

So long so good. All we need now to get the controller to work. This can be done by a little jQuery/Javascript code by using the fullscreen API

$(".fullscreen").click(function(){

if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {

// exit full-screen

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();