javascript - 如何将自定义控件添加到适用于 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 中运行。