Question

我正在尝试使用Vimeo托管我的视频，并使用VideoJS在前端显示它们。以下是示例页面：

<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

设置一个高度，auto不会这样做。试试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文件上传到服务器，然后我运行它，现在它播放音频和视频。

VideoJS音频但没有视频

4 个答案: