Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add custom controls to Full Screen Html5 Video for iOS?

I am using video.js, but I can't figure out if it's possible to add custom controls in full screen mode. More specifically, I am attempting to add a camera button that takes a screenshot in fullscreen.

What I have so far:

    <video
        id="preview"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        playsinline >
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    </video>

and

var Button = videojs.getComponent('Button');
    var MyButton = videojs.extend(Button, {
        constructor: function() {
            Button.apply(this, arguments);
            console.log(this)
            this.controlText('some text')
            this.addClass('fa-camera')
            this.addClass('fas')
        },
        handleClick: function() {
            alert('you've clicked the camera. nice.')
        }
    });
    videojs.registerComponent('MyButton', MyButton);
    var player = videojs('preview');
    player.getChild('controlBar').addChild('myButton', {});

The JS is based off of this answer. This is all fine and dandy, it comes out looking like this:

example

Notice the camera icon under the red arrow. That is the desired outcome.

The desktop version looks fine. But the application will be primarily for mobile use. This is full screen player form iOS:

iOS 12.2

Finding reliable information has been difficult because there have been so many changes over the years.

The Question:

Is it possible to add custom controls for full screen use to an html video element displayed on an iOS device (currently iOS 12.2)? If so, how? If not, what would be a good alternative?

like image 660
Hunter Avatar asked Oct 23 '25 18:10

Hunter


1 Answers

It's possible now on iPad, which supports the proper fullscreen API in iOS 12.

On iPhone iOS 12 there's an option for the user to enable the fullscreen API, buried in Safari's settings under experimental features. There's hope that means it will work in iOS 13 on iPhone as standard too.

like image 109
misterben Avatar answered Oct 26 '25 09:10

misterben



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!