javascript - 如何正确处理切换 html5 视频

Question

我在遇到可能仅与视频相关的问题之后遇到了很多麻烦，并且可能对一般的页面资源理解不佳。我想要完成的是拥有一个网页的能力，通过单击“前进”和“后退”按钮，可以更改 div 的内容以按明显的顺序显示其中一个视频。该视频当前为 html5 视频元素中的 mp4 格式。

我试过几种方法。

• 直接改变源元素的src(好像什么都没做)

• 删除该元素，并使用不同的 src 重新添加它。 (有下面描述的问题)

• 删除该元素，并使用 Jquery .load() 放置一个包含整个视频元素的外部 html 文件，包括每个 src 的单独 html 文件。 (有下面描述的问题)

• 删除该元素，并使用指向使用 python flask 框架从 GridFS 下载文件的 src 重新添加它。 (有下面描述的问题)

好的，我遇到的主要问题是从页面重复下载同一视频。假设您点击“下一个视频”，然后点击“上一个视频”。这会导致视频“变黑”(根本没有加载，就像 src 损坏一样)。第一次请求每个视频时，加载时间不到一秒，第二次时有所不同，但总是超过 10 秒。在视频内容弹出并且可以播放之前。谷歌浏览器的开发网络工具在我等待时将媒体列为“待处理”，当它完成等待时，它最终将上述视频变为红色(已取消)并将新来源变为“部分内容”。在等待期间，它似乎无法从服务器中提取任何内容，包括翻转图像。

我已经在本地使用 flask 和 python 简单 html 服务器以及通过千兆以太网的 8 核服务器上进行了尝试。这不是随机网络延迟的问题，而是发生了一些奇怪的事情。

我想弄清楚的事情之一是向服务器发出新请求如何处理部分内容。我有一些想法，浏览器缓存会存储文件，以便第二次加载它应该更快，无论如何这都是最佳的。 html5 视频还会发生这种情况吗？

另外值得注意的是，这些文件相当小，一分钟左右的视频大约 20 MB。似乎网络服务器出于某种原因只是阻止了第二个请求，我想知道你们中是否有人听说过这个。我可以根据要求发布代码，但我认为这个概念非常简单。

我打算使用GridFS和flask来完成这个站点的最终实现。

由于以下建议，我尝试取消源元素并将 src 属性附加到视频本身。这会产生相同的结果。这是我正在做的相当简单的事情:

$('#addlinks').click(function(){

    $('#maininside').remove();
    $('#maintext').append('<div id=maininside></div>');        
    $('#maininside').html('<video width="100%" controls src="/getmedia/dangerisland-01-video-01.m4v">Your browser does not support the video tag.</video>');

});

---

<article id="maintext">            

        <div id="maininside">            

        </div>       

</article>

---

第一次单击该按钮时，会有非常轻微的延迟，我可以在下载视频时在监视器中看到高网络使用率。再次单击该按钮后，在这种情况下，我有大约 30 秒没有使用网络，然后它再次全速下载并恢复。这是第二次恢复后网络使用的开发 View :

感谢您提供的任何见解。

Answer 1

这里有很多子问题和变数；不确定我能多好地解决所有这些问题——但我会试一试。

• kalhartt 的评论引导您更正关于简单 改变来源。但我会注意到，根据我的经验，行为 当你完成这个过程时，你会从各种浏览器中看到 会不一致。在过去的一年里，我在这方面做了一些工作， 至少在当时这是一种糟糕的用户体验——当浏览器响应源和新版本的变化时，用户体验到视频被破坏了 加载。我们最终生成了新的视频元素并将它们切换出去(但由于每个浏览器发布媒体事件的时间不同，即使这样也可能充满陷阱。)

• 我不确定你是如何提供视频的，但 flask 开发服务器阻塞(除非你设置 app.run(threaded=True)，我想。)

• 也有可能你正在运行 由内部视频加载/缓存逻辑引起的行为 浏览器，您甚至会观察到每个浏览器的显着差异 浏览器处理这些任务。测试的好方法 反对这种行为的方法是附加一个唯一的查询字符串 (可能带有时间戳)每次加载；视频应该很高兴 负载(如果服务器未阻塞。)如果服务器阻塞是问题所在，则可能值得在 S3 上托管视频，直到您准备好专注于它们的交付方式。

• 另一种可能性是，如果您怀疑要再次使用原始视频对象，则不要销毁它(相反，您可以暂停它，将其从 DOM 中删除，并保存对它的引用)。但是，如果重复使用的情况不太可能发生，尤其是如果您希望用户在一次加载页面时播放多个视频，则最好丢弃它们。妥协可能是保留固定数量的以前的视频对象。