Home / Questions / 365732
Accepted
Narciso Aifuz
Asked: 2020-06-16 16:23:14 +0800 CST 2020-06-16 16:23:14 +0800 CST

Orientation for videos

  • 772

I need some help. This orientationchange code for video doesn't work for me at all. Just using it I give Play to the video and turn the mobile shows full screen. Then you can't get out of there.

var vid =  document.querySelector("video");

window.addEventListener("orientationchange", function() {

//(if) Para todos los 
navegadores
if (vid.requestFullscreen) {
vid.requestFullscreen();

} else {
//Solo para Chrome

 vid.webkitRequestFullscreen();
}

}, false);
javascript

1 Answers

  1. Best Answer

    You need to analyze the orientation of the device to analyze if you enter full screen or not. window.orientationhas 4 possible values: 0, 180 for horizontal and 90, -90 for vertical.

    var vid =  document.querySelector("video");

window.addEventListener("orientationchange", function() {
    let angle = window.orientation;
    if(angle == 0 || angle == 180) {
        // Salir de pantalla completa
    if(document.fullScreenElement) {
            document.exitFullscreen();
    }
    } else {
        //(if) Para todos los  navegadores
        if (vid.requestFullscreen) {
            vid.requestFullscreen();
        } else {
            //Solo para Chrome
            vid.webkitRequestFullscreen();
        }
    }
}, false);

    Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation

    • 0