如何为iOS全屏HTML5视频添加自定义控件？

Question

我正在使用video.js，但是我不知道是否可以在全屏模式下添加自定义控件。更具体地说，我尝试添加一个全屏截图的相机按钮。

到目前为止我所拥有的：

    <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>

和

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', {});

JS基于this答案。 这一切都很好，很花哨，看起来像这样：

请注意红色箭头下方的相机图标。那是理想的结果。

桌面版本看起来不错。但是该应用程序将主要用于移动应用。这是iOS的全屏播放器：

查找可靠的信息一直很困难，因为多年来发生了很多变化。

问题：

是否可以向iOS设备（当前为iOS 12.2）上显示的html视频元素添加用于全屏使用的自定义控件？如果是这样，怎么办？如果没有，那么什么是更好的选择？

Answer 1

现在可以在iPad上使用，它在iOS 12中支持适当的全屏API。

在iPhone iOS 12上，用户可以选择启用全屏API，该选项隐藏在Safari的实验功能下的设置中。希望这意味着它也可以在iPhone上的iOS 13中正常运行。