Спрятать видео и послушать ее аудио

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> 

для того чтобы достигнуть своей цели, я пробовал разные решения, но они не работали должным образом.

Первый заключается в использовании JQuery установить ширину и высоту плеера:

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

Но в этом случае на IE11 и Mozilla Firefox видео не загружается. Ему нужно не менее 5 по ширине и высоте, но затем оно становится видимым.

Затем я попытался использовать .hide() из JQuery:

$("#video-js-player-container").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 и определите, какой из них лучше всего работает в вашей ситуации.