html 视频播放器并不总是从 src 读取

Question

我想播放来自网络服务器的视频文件。这是我的 HTML 代码。

<video width="100%" height="100%" controls>
    <source ng-src="{{media_url}}" type="video/mp4" />
</video>
<div>{{media_url}}</div>

在 angular 控制器中：

$scope.media_url = '/get_video/movie.mp4';

每次刷新页面时，div 都能正确显示。但是，视频播放器并不总是向“/get_video/movie.mp4”发送请求。它的行为看起来很随机。

如果我直接设置src就没问题:

<source ng-src="/get_video/movie.mp4" type="video/mp4" />

知道为什么吗？

Answer 1

浏览器在 URL 的基础上进行缓存，我相信每次您都应该生成新的 url 可以解决您的问题，并且不会影响您的功能。在 url 末尾附加日期将使 url 每次都是唯一的，因为它不会从浏览器缓存查找中检索任何内容。

标记

<video width="100%" height="100%" controls>
    <source ng-src="{{generateNewUrl(media_url)}}" type="video/mp4" />
</video>

代码

$scope.generateNewUrl = function(media_url){
    return media_url + "?t="+new Date();
}

Answer 2

我真的找到问题了。不是因为浏览器缓存。

参考这个post

changing source on html5 video tag

html video player not always read from src