刷新浏览器时 HTML5 视频不起作用答案

【问题标题】：HTML5 Video is not working when refreshing the browser刷新浏览器时 HTML5 视频不起作用
【发布时间】：2013-03-21 20:04:58
【问题描述】：

我必须创建一个带有全屏 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...）时，视频是只是黑色，一切正常......

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

【问题讨论】：

标签： html wordpress video mp4 webm

【解决方案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>');
    }

【讨论】：