0

我必须创建一个带有全屏 dragdealer.js 幻灯片的网站，在其中一张幻灯片中嵌入 HTML5 视频作为背景。

我正在使用 Wordpress 和 video-js。所以我在 WP 帖子中硬编码以下代码：

<video height="450" width="800" poster="Absolute_poster_link" autoplay="autoplay" preload="metadata" loop="loop" class="video-js" id="bg_video" tabindex="0">
<source src="Absolute_mp4_link"  type="video/mp4"></source>
<source src="Absolute_webm_link" type="video/webm"></source>
<source src="Absolute_ogv_link"  type="video/ogg"></source>
</video>

当页面被父链接触发时，页面正在加载，在后台显示视频以便它可以工作，但是当我在此页面上按 F5 或刷新浏览器（Firefox、Chrome ...）时，视频只是黑色的，一切正常...

有没有人解决这个问题？非常感谢

4

1 回答 1

0

好吧，我找到了一种方法来完成这项工作。似乎 Wordpress 不适合在其帖子区域中发布具有自动播放属性的 HTML5 视频标签。所以我决定使用 javascript 函数和 .append() jQuery 方法创建 HTML5 标记，它对我有用！

我硬编码了这样的东西：

function appendVideo(){
    jQuery('#main').append('<div id="video-loop-wrapper"><div class="video-overlay "></div><div id="video-loop"></div></div>');
    jQuery('#video-loop').html('<video id="bg_video" width="800" height="450" loop="loop" preload="metadata" autoplay="autoplay" poster="poster_link"><source src="video_.mp4_link" type="video/mp4" /><source src="video_.webm_link" type="video/webm" /><source src="video_.ogv_link" type="video/ogg" /></video>');
    }
于 2013-03-21T12:04:58.320 回答