The problem of video playback and its adaptation for iPhone and iPad. HTML5

Recently, in the process of implementing one of the modules of the project that I’m working on, there was a problem playing video on a web page, and there were also problems with its adaptation to iPhone and iPad.

The problem was this:

Created an HTML5 web page that has a small video on it, created my own control-panel for the player, and everything works fine in Chrome and FireFox, but does not work at all on either iPhone or iPad. I just get a blank page.

The implementation was as follows:

<div>
   <div data-tag="loader"> </div>
   <video preload="none" loop playsinline="false" muted="true" data-tag="player" 
src="" type="video/mp4"></video>
    <div type="button" data-tag="playMobile" </div>
    <div class="player__control-panel">
        <buttontype="button"data-tag="play"></button>
        <buttontype="button"data-tag="pause"></button>
        <div class="player__progress" data-tag="progress"></div>
        <button type="button" data-tag="muted"></button>
        <button type="button" data-tag="unmuted"></button>
        <button data-tag="enterFullScreen" ></button>
    </div>
</div>

The problem is sometimes solved by the attribute playsinline in the tag video (Note for those using React, you will need to use playsinline, in camelCase). But in my case it did not work, especially since I wanted the video not to play when the page loads, but only when we press the play button and the video goes into full screen mode.

If you want to go into full screen mode, you will have to write code to check the browser, since each browser supports its own method. Including Safari for IOS (Safari for iPhone does not support some features of its older brother):

enterFullScreen() {
        const elem = this.view.player;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
            /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.webkitEnterFullscreen) {
            /* Safari */
            elem.webkitEnterFullscreen();
        } else if (elem.msRequestFullscreen) {
            /* IE11 */
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            /* Mozila */
            elem.mozRequestFullScreen();
        }
        if (elem.fullscreenElement === null) {
            this.view.player.pause();
            this.view.player.controls = false;
        }
    }

To exit full screen mode on iPhone and iPad via a back swipe, you would also have to write a function to stop the video on exit. If you want to hide the video control panel, then when exiting full screen mode, you need to specify playsinline="false" otherwise the standard controls will be visible:

checkFullScreen() {
        if (isTouch) {
            if (document.fullscreenElement) {
                this.view.player.play();
            } else {
                this.view.player.pause();
            }
        } else {
            if (document.fullscreenElement) {
                this.view.player.controls = true;
            } else {
                this._checkPaused();
                this._checkMute();
                this.view.player.controls = false;
            }
        }
    }

Also below is the code to implement the video control panel:

start() {
        const playPromise = this.view.player.play();
        if (playPromise !== undefined) {
            playPromise
                .then(() => {
                    // Automatic playback started!
                    // Show playing UI.
                })
                .catch((e: any) => {
                    // Auto-play was prevented
                    // Show paused UI.
                    if (e.code === 9) {
                        this.view.loader.classList.add('hide');
                        this.handleVideoError();
                    }
                });
        }
        this.view.pause.style.display = 'block';
        this.view.play.style.display = 'none';
        this.startEvent.emit(null);
    }
 
    startMobile() {
        this.enterFullScreen();
        this.view.player.play();
        this.startEvent.emit(null);
    }
 
    stop() {
        this.view.player.pause();
        this.view.play.style.display = 'block';
        this.view.pause.style.display = 'none';
        this.stopEvent.emit(null);
    }
 
    rewind(percent: number) {
        this.view.player.currentTime = percent * this.view.player.duration;
    }
 
    mute() {
        this.view.player.muted = true;
        this.view.unmuted.style.display = 'none';
        this.view.muted.style.display = 'block';
    }
 
    unmute() {
        this.view.player.muted = false;
        this.view.muted.style.display = 'none';
        this.view.unmuted.style.display = 'block';
    }
 
    trackingTime() {
        this.view.value.style.width = `${(100 * this.view.player.currentTime) /        this.view.player.duration}%`;
    }
 
    rewindClick(e: MouseEvent) {
        this.rewind(this._getDistance(e.clientX));
    }
 
    getDistance(x: number): number {
        return (x - this.view.progress.getBoundingClientRect().x) / this.view.progress.getBoundingClientRect().width;
    }

That’s it, problem solved.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *