9

指定した幅と高さのビデオがあります。ダブルクリックすると、を使用して全画面表示になりますvideoElement.webkitRequestFullScreen()。デフォルトでは、ビデオにはコントロールがありません。しかし、何らかの理由で、全画面表示になると、デフォルトのコントロールがポップアップします。これが私がしていることです：

<video id="videoId" width="320" height="240" autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

そして、enterFullScreen(...)関数は次のように定義されます：

function enterFullScreen(elementId) {
    var element = document.getElementById(elementId);
    element.webkitRequestFullScreen();
    element.removeAttribute("controls");
}

ご覧のとおり、関数のコントロールを削除してみました。しかし、役に立たない。

このデフォルトのコントロールの自動挿入が発生しないようにする方法を誰かに教えてもらえますか？

4

5 に答える 5

13

ここで説明されているように、これは CSS で解決できます: HTML5 video does not hide controls in fullscreen mode in Chrome

video::-webkit-media-controls {
  display:none !important;
}
于 2014-02-08T22:09:04.143 に答える
7

最後に、これを回避する方法を見つけました。Alexander Farkas が示唆したように、ビデオを別の div でラップし、この親 div を全画面表示に設定した後、ビデオの高さと幅をscreen.heightそれぞれと に設定しscreen.widthました。そして、全画面表示を終了するときに、両方の div の元のプロパティを復元しました。

擬似コード:

HTML :

<div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>

JavaScript :

function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();           
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);
于 2013-01-02T05:53:55.090 に答える
1

ビデオが全画面表示になる場合、コントロール属性がない場合も、ユーザーエージェントはコントロールを表示する必要があります。

新しいユーザーエージェントは、どの要素でもフルスクリーンAPIをサポートしています。したがって、次のことを試すことができます。

element.parentNode.webkitRequestFullScreen();
于 2012-12-31T20:48:14.547 に答える
0

コントロールを含む div の ID を見つけて、javascript を使用して無効にすることができます。たとえば、コントロールを含む div の id が「controldiv」の場合、関数で次のように記述できます。

var ctrls = document.getElementById("controldiv");
ctrls.disabled="true";
于 2012-12-31T13:11:34.417 に答える
0

通常、次のように動作するはずです。

var videoPlayer = document.getElementById('videoId');
videoPlayer.controls = false;

しかし、全画面モードにジャンプするとそれが上書きされるかどうかはわかりません。

于 2012-12-31T16:48:56.507 に答える