Question

我让VideoJS在Wordpress网站的模态窗口中显示视频。我没有使用videoJS插件，我已将最新的VideoJS版本加载到主目录。视频标记的代码位于一个单独的非Wordpress html文件中。它就是它自己的。

视频在Mac上的Safari中运行良好，它在Windows上的Firefox中运行良好。它在Mac上的Firefox中无法正常工作。

我已将此问题追溯到由“控件”引起的问题。标签中的选项。只要我将选项更改为＆＃39;自动播放＆＃39;并取出“控制”，视频在Mac上的Firefox和Safari中播放效果非常好。

更具体地说，它似乎是皮肤滑块上的小计时器（显示已播放的视频数量）。

Firefox中的皮肤与Safari中的皮肤不同。 Safari中的一个是BLACK，显示播放器底部滑块左右两侧的时间。 Firefox中的那个是灰色的，并且有时间在播放器底部滑块上方的一个小的凸起框中。这个凸起的盒子似乎导致Firefox中的视频播放出现问题。视频仅在滑块上方的条带上缓慢播放，并且仅在计时器框的高度上播放。

我尝试过：

<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>

直接打电话

<script src="http://vjs.zencdn.net/c/video.js"></script>

在Wordpress页面的头部，其中模式窗口显示包含代码的单独html页面。

那不起作用; Safari和Firefox仍会在播放器底部显示控件。

我也尝试添加：

.vjs-default-skin .vjs-time-controls {display: none !important;}

到我的WP主题样式表。这也不起作用。

问题1：为什么Firefox使用与VideoJS不同的皮肤而不是Safari？如果我可以为Firefox获得相同的控制器（即没有提出时间代码框的控制器），那么视频可能会正常播放。

问题2：如何限制控件只显示大中心播放按钮而不显示播放器底部的控件？同样，没有凸起的时间代码框可能会使视频在Firefox中正常显示。

问题3：所有这一切都是因为我发现iPhone和iPad不播放自动播放设置的视频。我最初在没有＆＃39;控件的标签中设置了自动播放选项，但由于它不能在iPad中工作（只是在视频中获得黑色背景），我拿出了自动播放＆＃39;自动播放＆＃39;并添加了＆＃39;控件＆＃39;。当我注意到Firefox中的问题时就是这样。因此，如果我无法修复Firefox中的控件并且无法正常工作，那么有没有办法绕过iPad上的黑屏问题并使用“自动播放”＃39;对于没有控件的Firefox？

如果您有任何其他信息，请告诉我。

你不应该使用代码，因为它全部工作;这个问题只出现在Mac上的Firefox中，当我添加＆＃39;控件＆＃39;到标签。我确信这可以通过使用不同的皮肤或摆脱视频底部的控件来解决（好吧，我希望能解决它！）。

顺便说一下，我在WP模板的头部使用了这个

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

哦，Firefox并没有回到Flash Flowplayer，它肯定在HTML5视频标签中播放ogg文件。

ctagney，谢谢花时间回应。

问题1

嗯，奇怪。

我现在在标题中有这个：

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

这是我在html页面中的代码（我已经用...取代了实际域名，因为我不想要链接到该网站 - 你可以在www.horizonyachtsgrenada上看到该视频.com / new-yacht-sales-grenada /位于右侧栏顶部：

<div style="margin:0; Padding:0;">
<video id="salesvideo" class="video-js vjs-default-skin" preload="auto" controls width="540" height="320"
poster="http://.../videos/horizon-dream-makers-splash.jpg"
data-setup="{}">
<source src="http://.../video/HORIZON_FINAL_HD.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://.../video/HORIZON_FINAL_HD.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://.../video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="540" height="320" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":[http://.../videos/horizon-dream-makers-splash.jpg", {"url": "http://.../video/HORIZON_FINAL_HD.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://.../videos/horizon-dream-makers-splash.jpg" width="540" height="320" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>

为什么它没有使用video.js的任何想法？

问题2

我现在已经将该代码添加到了该页面，所以希望一旦它获取了video.js，它就会选择这个。我认为我不需要控制＆＃39;在视频标签中，这是正确的吗？

问题3

因此，如果我正确理解您的链接，我就可以将其从自动播放更改为控制它在iPad和iPhone上运行。

新问题：

即使有视频的webm版本，它也无法在Chrome中运行！我开始变灰了......只是想让视频现在正常工作!! ：（

任何帮助都非常感激。

干杯，

崔西

编辑：BTW视频确实在不同的网站（不同的服务器，不同的视频代码）上在Safari，Firefox和Chrome上播放，因此视频本身不会导致问题。

Answer 1

你在firefox和safari中描述的玩家听起来像是每个浏览器的原生视频播放器。换句话说，你实际上并没有使用video.js。

问题1

一旦你开始工作，你会发现玩家在Safari和Firefox中应该看起来彼此相同。如果没有看到您的代码，很难说为什么您的video.js播放器没有初始化，但您需要执行以下操作之一：

在您的视频元素中添加data-setup =''标记，您可以使用该标记通过JSON值指定选项。
在页面加载后，有一个单独的脚本调用_V_("video id", {})。

我建议你使用第二个选项，因为你需要一些额外的设置来处理（见下文）

问题2

当控件关闭时，您想要的大播放按钮会自动隐藏，因此您应该在视频播放器初始化后调用它的show（）方法。

<script>
_V_("example", {}, function() { this.bigPlayButton.show(); });
</script>

有关工作示例，请参阅以下内容。 http://jsbin.com/ijipag/2/edit

问题3

请参阅Can you autoplay HTML5 videos on the iPad?

Answer 2

问题是我没有包含对video.js的调用

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

在模态（FancyBox iframe）窗口中显示的单独（非WP）html页面中。我现在已经把它包括在内了，它成功调用了video.js并显示了没有Safari和Firefox底部控件的大播放按钮。

它仍然无法在Chrome中运行。在Chrome中，当您点击播放按钮时，它只显示海报图片和旋转加载的gif。

更新：通过移动

让它在Chrome中运行

  <source src="http://www.horizonmotoryachts.com/video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />

上面调用mpeg4和ogg文件。

在Mac上测试Firefox和Safari，它仍在使用。

VideoJS'控制'导致视频无法在OSX（Mountain Lion）上的Firefox（v18.0.1）中正常播放

2 个答案:

问题1

问题2

问题3