1

I want to play a video file from my web server. Here is my HTML code.

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

In angular controller:

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

Every time I refresh the page, the div is displaying correctly. However, the video player is not always sending request to "/get_video/movie.mp4". Its behavior looks random.

If I set the src directly, then there's no problem:

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

Any idea why?

Ruofeng
  • 2,180
  • 3
  • 14
  • 15
  • check whether the resource `/get_video/movie.mp4` is cached - so check the cache properties using your browser's network tab(developer tools) – Arun P Johny Mar 30 '15 at 03:48
  • I disabled cache in chrome. But /get_video/movie.mp4 is not in Network every time. – Ruofeng Mar 30 '15 at 04:04

2 Answers2

1

Browser do caching on basic of URL, I believe every time you should generate new url that could solve you issue, and wouldn't affect your functionality. Appending date on the end of url would make url unique everytime as it will not retrieve any content from browser cache lookup.

Markup

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

Code

$scope.generateNewUrl = function(media_url){
    return media_url + "?t="+new Date();
}
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
0

I actually found the problem. It's not because of browser caching.

Refer to this post

changing source on html5 video tag

Community
  • 1
  • 1
Ruofeng
  • 2,180
  • 3
  • 14
  • 15