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