调用 webkitEnterFullscreen() 时的 DOM 异常 11

DOM Exception 11 when calling webkitEnterFullscreen()

本文关键字:DOM 异常 时的 webkitEnterFullscreen 调用      更新时间:2023-09-26

异常是什么意思?我该如何解决它?我正在使用最新的 Google Chrome for Ubuntu。

视频元素接收其资产元数据之前调用webkitEnterFullscreen时,可能会发生INVALID_STATE_ERR: DOM Exception 11。最简单的解决方案是通过将webkitEnterFullscreen放在分配给视频loadedmetadata事件的回调函数中来延迟对的调用。

在移动环境中,

您需要更进一步,将该调用附加到可触摸元素,以便用户启动该元素,因为播放和全屏操作必须由移动环境中的用户交互驱动。

代码应如下所示:

var video, play, fullscreen;
video = document.createElement('video');
video.src = 'my_cool_video.mp4';
video.addEventListener('loadedmetadata', function () {
    fullscreen.disabled = false;
}, false);
play = document.createElement('button');
play.innerHTML = 'PLAY';
play.addEventListener('click', function () {
    video.play();
}, false);
fullscreen = document.createElement('button');
fullscreen.innerHTML = 'FULLSCREEN';
fullscreen.disabled = true;
fullscreen.addEventListener('click', function () {
    video.webkitEnterFullscreen();
}, false);
document.body.appendChild(video);
document.body.appendChild(play);
documnet.body.appendChild(fullscreen);