Safari html5 video fullscreen size

问题

On OSX Safari, HTML5 video tag when clicking on fullscreen. How can I force the video to cover the full screen instead of showing a small (maybe the original) size with a black background?

回答1:

Ok, found it. Need some CSS when a max-height is set. Answer:

video:-webkit-full-screen {
   width: 100%;
   height: 100%;
   max-height: 100%;
}

回答2:

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

<div class="videoContainer">
    <video id="video" allowfullscreen="allow">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <p>Your browser does not support the video tag.</p>
    </video>

    <!-- Control -->
    <div class="control">
        <a class="play mediaplayer-play"></a>
        <a class="fullscreen mediaplayer-full-screen"></a>
    </div>
</div>

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();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

    }else if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
        var i = $("#videoContainer");

        // go full-screen
        if (i.requestFullscreen) {
            i.requestFullscreen();
        } else if (i.webkitRequestFullscreen) {
            i.webkitRequestFullscreen();
        } else if (i.mozRequestFullScreen) {
            i.mozRequestFullScreen();
        } else if (i.msRequestFullscreen) {
            i.msRequestFullscreen();
        }
    }           
});

If you wanna know how to add Picture In Picture you can see this post here

来源：https://stackoverflow.com/questions/27452624/safari-html5-video-fullscreen-size

标签

html

video

safari

fullscreen