Question

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

我正在使用Wordpress＆amp;视频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 ...）时，视频是只是黑色，任何东西都在工作......

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

Answer 1

好吧，我找到了一种方法来完成这项工作。似乎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>');
    }

刷新浏览器时HTML5视频无法正常工作

1 个答案: