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:

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:

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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With