2

我有一个电影（按钮）列表 - 当用户点击时 - 执行 AJAX 请求以更新视频标签的源属性。在加载新视频 (.load()) 之前，视频元素被克隆、删除，然后重新插入 DOM（这是为了修复 Safari 错误）。请参见下面的代码：

//load in new paths
var contentVideos = $("#projectsMedia video source");
contentVideos.each(function () {
    if ($(this).attr("src").lastIndexOf("mp4") !== -1) {
        $(this).attr("src", videoPath + ".mp4");
    } else if ($(this).attr("src").lastIndexOf("ogv") !== -1) {
        $(this).attr("src", videoPath + ".ogv");
    } else if ($(this).attr("src").lastIndexOf("webm") !== -1) {
        $(this).attr("src", videoPath + ".webm");
    }
});

//clone vid, delete, reload for safari bug
var clonedVid = $("#projectsMedia video").clone();
$("#projectsMedia video").remove();
clonedVid.insertAfter($("#projectsMedia h1"));
$("#projectsMedia video")[0].load();

这适用于所有浏览器，但 Chrome 似乎正在投入使用。将新路径放入 src 属性并加载视频后，Chrome 会花费 2 秒到无穷大之间的任何时间来加载视频。

打开开发控制台，我发现 mp4 文件被多次下载（Chrome 的一个明显特征），并且请求被无限期地挂起，视频很少在 10 秒内加载。见截图。

在此处输入图像描述

Chrome 中的另一个古怪行为是，在页面刷新（或单击按钮以执行新的 AJAX 请求）时，如果开发控制台未打开，则打开它将强制加载 mp4，并且工作正常。

有谁知道解决这个问题？

4

0 回答 0