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

我让VideoJS在Wordpress网站的模式窗口中显示视频。我没有使用videoJS插件，我已将最新的videoJS版本加载到主目录。视频标签的代码在一个单独的非Wordpress html文件中，全部由它自己完成

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

我已将此问题追溯到标签中的“控件”选项导致的问题。只要我将选项更改为“自动播放”并去掉“控件”，视频就可以在Mac上的Firefox和Safari中完美播放

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

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

我尝试过：

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

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

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

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

问题3：所有这些都是因为我发现iPhone和iPad不使用自动播放设置播放视频。我最初在标签中设置了不带“控件”的自动播放选项，但因为它在iPad中不起作用（只是在视频中添加了一个黑色背景），我取出了“自动播放”并添加了“控件”。就在那时，我注意到了Firefox中的问题。因此，如果我无法解决Firefox中的控件无法正常工作的问题，有没有办法绕过iPad上的黑屏问题，在没有控件的情况下对Firefox使用“自动播放”呢

如果您需要任何其他信息，请告诉我

你不应该需要这些代码，因为它们都在工作；只有当我在标签中添加“控件”时，问题才会出现在Mac上的Firefox中。我相信这可以通过使用不同的皮肤或去掉视频底部的控件来解决（我希望这能解决问题！）

顺便说一句，我在我的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.horizonyachtsgrenda.com/new yacht sales glandada/上看到视频：

<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，它就会拾取该代码。我假设我不需要视频标签中的“控件”来工作，对吗

问题3

因此，如果我正确理解了你的链接，那么我将其从自动播放改为在iPad和iPhone上使用控件是正确的

新发行：

即使有一个webm版本的视频，它在Chrome中也不工作！我开始变灰了…只是希望视频现在能工作！！：(

非常感谢您的帮助

干杯

特蕾西

---

编辑：顺便说一句，视频在Safari、Firefox和Chrome的不同站点上播放（不同的服务器、不同的视频代码）因此，这不是视频本身造成的问题。

您在firefox和safari中描述的播放器听起来像每个浏览器的本地视频播放器。换句话说，您实际上没有使用video.js

问题1 一旦开始工作，您会注意到Safari和Firefox中的播放器应该看起来完全相同。如果看不到您的代码，很难说为什么video.js播放器没有初始化，但您需要执行以下操作之一：

在视频元素中包含一个data setup=''标记，您可以使用该标记通过JSON值指定选项

有一个单独的脚本，在页面加载后调用

\u V(（“视频id”{}）

我建议您使用第二个选项，因为您需要处理一些额外的设置（请参阅：下文）

问题2 当控件关闭时，所需的大播放按钮会自动隐藏，因此在视频播放器初始化后，只需调用它的show（）方法即可

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

_V_3;（“示例”，{}，函数（）{this.bigPlayButton.show（）；}）；

请参见下面的工作示例。

问题3

---

请参见

问题是我没有包括对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

更新：让它在Chrom中工作

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

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

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