当前位置：文江博客话题详情

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

发布于 2024-12-01 20:59:54 字数 57 浏览 6 评论 0原文

异常是什么意思？我该如何修复它？我正在使用适用于 Ubuntu 的最新 Google Chrome。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请帮我爱他 2024-12-08 20:59:54

在视频元素收到其资产的元数据之前调用 webkitEnterFullscreen 时，可能会发生 INVALID_STATE_ERR：DOM 异常 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);

INVALID_STATE_ERR: DOM Exception 11 can occur when a call to webkitEnterFullscreen is made before the video element has received its asset's metadata. The simplest solution is to defer the invocation of webkitEnterFullscreen by putting it in a callback function assigned to the video's loadedmetadata event.

In a mobile environment, you need to take things a step further by attaching that call to a touchable element so that it is user initiated since play and fullscreen actions must be driven by user interaction in mobile environments.

The code should look kind of like this:

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);

回复收藏 0 原文

~没有更多了~