在 Apple 设备上请求 HTML5 视频全屏

Question

大家好，我有自定义全屏图标可以触发我的视频全屏显示。一切正常，就是不能在 Apple 设备上运行。你知道怎么解决吗？

$('.fullscreen_btn').click(function() {
    fullscreen=true;
    var mediaElement = document.getElementById('videoAbout');
    if(mediaElement.requestFullScreen) {
        mediaElement.requestFullScreen();
    }
    else if(mediaElement.webkitRequestFullScreen) {
        mediaElement.webkitRequestFullScreen();
    }
    else if(mediaElement.mozRequestFullScreen) {
        mediaElement.mozRequestFullScreen();
    }
    else if(mediaElement.msRequestFullScreen) {
        mediaElement.mozRequestFullScreen();
    }
});

如我所说 - 上面的代码适用于 Windows/android 设备，但不适用于 Apple 设备。

Answer 1

直接从网站引用

In Safari, the built-in video controls include a play/pause button, volume control, and a time scrubber. In Safari 5.0 and later on the desktop and on iOS 4.2 on the iPad, the controls also include a full-screen playback toggle on the lower right. The controls automatically fade out when the video is playing and fade in when the user hovers over the video or touches it.

我还说如果你在网站中嵌入音频或视频，你应该使用HTML5。你可能用的是旧的 html4，我不知道。试试这个 link

Answer 2

我的问题解决了。我所要做的就是：

var mediaElement = document.getElementById('videoAbout');
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();

这将在 iOS 台设备上全屏打开 HTML5 视频。

在 Apple 设备上请求 HTML5 视频全屏

Request HTML5 video fullscreen on Apple's devices

javascript

jquery

html

video

fullscreen