VideoJS音頻但無視頻

Question

我正在嘗試用Vimeo托管我的視頻，並使用VideoJS在前端顯示它們。 這是示例頁面：

https://jsfiddle.net/zhdnmxt8/

<div>
    <video id="example_video_1" class="video-js vjs-default-skin"
      controls preload="auto" width="auto" height="auto"
      data-setup='{}'>
            <source src="//player.vimeo.com[...]" type="video/mp4" data-quality="hd" data-res="HD" data-default="true">
            <source src="//player.vimeo.com/[...]" type="video/mp4" data-res="SD">
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
    </video>
</div>

按播放獲取音頻，但沒有視頻顯示。 為什么是這樣？

注意： VideoJS CDN JS和CSS通過JSFiddle的外部資源提供。

Answer 1

設置高度，自動不起作用。 嘗試例如500px ，這應該可以做到。

演示在這里 。

Answer 2

設置高度和寬度。

width="500" height="500"

https://jsfiddle.net/zhdnmxt8/1/

Answer 3

之所以使用auto高度和寬度，是因為我想讓VideoJS容器具有響應能力。 這就是為什么我不想將值硬編碼到播放器中的原因。

我發現的最佳解決方案是：

video.js大小適合div

對.video-js CSS覆蓋進行了較小的更改：

.video-js { padding-top: 56.25% }

（這確保了視頻在視口中顯示。）56.25％是我從本文中找到的神奇的16：9填充數字（這篇完整的文章並沒有完全解決我的問題，而是提供了缺失的拼圖）：

http://coolestguidesontheplanet.com/videodrome/videojs/

謝謝大家！

Answer 4

實際上，當我在本地播放視頻時，這給了我同樣的問題。 它只播放黑屏音頻，但之后我將相同的html文件上傳到服務器，然后運行它，現在它同時播放音頻和視頻。