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，應該這樣做。

演示here。

Answer 2

設置高度和寬度。

width="500" height="500" 

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

Answer 3

爲什麼我用auto高度和寬度去的原因是因爲我想使VideoJS容器響應。這就是爲什麼我不想將這些值硬編碼到玩家身上的原因。

我發現最好的解決辦法是在：

video.js size to fit div

與一個較小的變化到.video-js CSS控制裝置：

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

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

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

謝謝大家！

Answer 4

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