javascript - 调用 webkitEnterFullscreen() 时出现 DOM 异常 11

Question

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

Answer 1

INVALID_STATE_ERR: DOM Exception 11webkitEnterFullscreen在视频元素收到其资产的元数据之前进行调用时，可能会发生。最简单的解决方案是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);