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

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

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

这是在iOS设备上打开HTML5视频的全屏。

Answer 2

直接从网站引用

在Safari中，内置视频控件包括播放/暂停按钮，音量控制和时间擦除器。在桌面上的Safari 5.0及更高版本以及iPad上的iOS 4.2上，控件还包括右下角的全屏播放切换。视频播放时控件会自动淡出，当用户将鼠标悬停在视频上或触摸视频时，控件会淡入。

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

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

2 个答案: