如何正确处理切换html5视频

Question

我遇到一些可能只与视频有关的问题后来到这里，并且可能对页面资源的理解很糟糕。我想要完成的是能够拥有一个网页，通过点击“前进”和“后退”按钮，可以更改div的内容以按顺序显示顺序显示其中一个视频。该视频目前采用html5视频元素的mp4格式。

我尝试过几种方法。

• 直接更改源元素的src（似乎没有做任何事情）

• 删除元素，然后用不同的src重新添加它。 （有下面描述的问题）

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

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

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

我在本地尝试使用flask和python简单的html服务器，以及通过千兆以太网的8核服务器。这不是随机网络延迟的问题，这种情况很奇怪。

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

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

我计划将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秒，然后它再次以全速下载并重新启动。以下是第二次重新启动后网络使用的开发视图：

感谢您提供的任何见解。

Answer 1

这里有很多子问题和变量;不确定我能解决所有这些问题 - 但我会试一试。

• kalhartt的评论引导你纠正 改变来源。但我会注意到，根据我的经验，这种行为 当您完成此过程时，您将从各种浏览器中看到 将是不一致的。在过去的一年里，我做了一些工作， 至少在当时用户体验不佳的情况下 - 当浏览器响应源和新的变化时，用户体验到视频已损坏 加载。我们最终生成了新的视频元素并将其切换出来（但即使这样也会因为每个浏览器发布的媒体事件的差异而充满陷阱。）

• 我不是肯定你是如何为视频服务的，而是烧瓶 开发服务器阻塞（除非你设置 我认为app.run(threaded=True)。）

• 你也可能正在跑步 由内部视频加载/缓存逻辑引起的行为 浏览器，你甚至会观察到每种方式的显着变化 浏览器处理这些任务。一个很好的测试方法 针对此行为将附加一个唯一的查询字符串 （可能带有时间戳）每个负载;视频应该很开心 加载（如果服务器没有阻止。）如果服务器阻塞是问题，那么在您准备好关注它们的交付方式之前，可能值得在S3上托管视频。

• 如果您怀疑它将再次被使用，则另一种可能性是不破坏原始视频对象（而是可以暂停它，将其从DOM中删除，并保存对它的引用）。但是，如果重复使用是不太可能的情况，特别是如果您希望用户在单个页面加载时播放许多视频，则最好丢弃它们。妥协可能是保留固定数量的先前视频对象。