R – get the old full screen scaling with FLVPlayback and flash 9.0.115+

flashflvfullscreenscalingvideo

With previous versions of flash, entering the full screen mode increased the height and width of the stage to the dimensions of the screen. Now that hardware scaling has arrived, the height and width are set to the dimensions of the video (plus borders if the aspect ratio is different).

That's fine, unless you have controls placed over the video. Before, you could control their size; but now they're blown up by the same scale as the video, and pixellated horribly. Controls are ugly and subtitles are unreadable.

It's possible for the user to turn off hardware scaling, but all that achieves is to turn off anti-aliasing. The controls are still blown up to ugliness.

Is there a way to get the old scaling behaviour back?

Best Answer

Here's another way to solve it, which is simpler and it seems to work quite well for me.

myFLVPlayback.fullScreenTakeOver = false;

The fullScreenTakeOver property was introduced in Flash Player 9 update 3. The docs are all a bit vague, but there's a bit more info here:

Using the FLVPlayback component with Flash Player 9 Update 3

Related Solutions

Javascript – How to make the window full screen with Javascript (stretching all over the screen)

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.

Here's how to do it:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Html – CSS background video sizing issue with large videos

Is this what you are looking for?

<style>
    #video-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    #video-bg > video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div id="video-bg">
    <video autoplay loop>
        <source src="Boat_15.mp4" type="video/mp4">
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div>

Take from here:

https://fvsch.com/code/video-background/

This takes advantage of object-fit which is relatively new in the CSS world so be careful for compatibility.

I believe there will always be minor scaling issues when stretching a video across a background like this because the viewport will most likely not match the scaling dimensions of the video. However, I think this is the appropriate solution to your problem as is scales one dimension of the video as necessary to cover the background without scaling outside the viewport.

Best Answer

Related Solutions

Javascript – How to make the window full screen with Javascript (stretching all over the screen)

Html – CSS background video sizing issue with large videos

Related Topic