ビデオを非表示にしてそのオーディオを聞きます

Question

私はビデオ再生を隠して、オーディオの実行のみをシミュレートしようとしています。私は.jspのページにどんなプレーヤーも見たくない。私はVideoJSをプレーヤーとして使用しています。

これは、HTMLコードです：

<div id="player-container"> 
    <audio id="player" 
      class="video-js" 
      autoplay="autoplay" 
      preload="auto" 
      width="640" 
      height="380" 
      data-setup='{}'> 
    <source src="path/to/my/video" type='video/mp4'/> 
    </audio> 
</div> 

私はさまざまなソリューションを試みたが、彼らは正常に動作しませんでした私のターゲットをachiveするには。

最初の1

は私のプレーヤーの幅と高さを設定するために JQueryを使用していた：

$("#player-container").width(1).height(1); 

をしかし、IE11およびMozilla Firefoxにこのようにビデオがロードされません。幅と高さが少なくとも5である必要がありますが、それが表示されます。

$("#video-js-player-container").hide(); 

が、このように私の映像がまったく起動しない：

は、その後、私はjQueryのの .hide()を使用しようとしました。

ビデオの音声だけを聞くプレーヤーを非表示にするにはどうすればよいですか？

Answer 1

いくつかの異なるCSS値を試して、ビデオを非表示にすることができます。

#player-container { 
    display: none; 
    visibility: hidden; 
    opacity: 0; 

    /* somewhat hacky */ 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    /* or */ 
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); 
} 

あなたのCSSでそれらのいずれかで遊んでみて、あなたの状況に最もよく働くかを判断。