0

我有 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>

就在呼吁

<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 使用与 Safari 不同的 VideoJS 皮肤?如果我可以为 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.horizo​​nyachtsgrenada .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,它就会选择它。我想我不需要视频标签中的“控件”来工作,对吗?

问题 3

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

新问题:

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

非常感谢任何帮助。

干杯,

特蕾西

编辑:顺便说一句,视频确实在不同站点(不同的服务器,不同的视频代码)上的 Safari、Firefox 和 Chrome 上播放,所以不是视频本身导致问题。

4

2 回答 2

0

问题是我没有包括对 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 上进行了测试,并且仍然可以正常工作。

于 2013-07-08T22:23:14.560 回答
0

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

问题 1

一旦你让它工作,你会注意到在 Safari 和 Firefox 中播放器应该看起来彼此相同。如果没有看到您的代码,很难说为什么您的 video.js 播放器没有被初始化,但您需要执行以下操作之一:

  1. 在您的视频元素中包含一个 data-setup='' 标记,您可以使用它通过 JSON 值指定选项。

  2. _V_("video id", {})有一个单独的脚本在页面加载后调用。

我建议您使用第二个选项,因为您需要处理一些额外的设置(请参见:下文)

问题2

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

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

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

问题 3

请参阅您可以在 iPad 上自动播放 HTML5 视频吗?

于 2013-07-05T10:15:34.867 回答