ngSrc doesn't work properly with HTML5 Video Source tag

[red-crown]

In firefox, ngSrc directive on video elements' tag doesn't work at all, and results in unsupported video format error. In chrome, updating ngSrc with data-binding doesn't update video, as it only loads video on page-load. i.e.

<video controls>
     <source ng-src="{{src}}">
</video>

doesn't work in Firefox at all, and in chrome it only works on first loading.

However,

<video ng-src="{{src}} controls></video>

works in both browsers, and it can be updated dynamically with no problems.

This is a problem, when having multiple video formats in order to support all browsers.

Related: #339

[sourcec0de]

Im having an issue as well, however I feel that the issue resides in Angulars ng-repeat.
If i remove the video from that scope it plays fine, otherwise none of the controls will even load.

[qaiser110]

me too! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

[clong365]

me too.

[gsk727]

me too! help me

[Scottjutsu]

+1

I'm using ng-repeat to set ng-src sources and they load correctly on page load, but if the video gets hidden via ng-show and then shown again the sources don't reload (in Chrome).

I can confirm sourcec0de's observation - if I remove the ng-repeat and use a single ng-src source (or multiple ng-src sources) the video reloads correctly upon re-showing.

[hsdk123]

I'm having the same problem. Is anyone currently looking into this?

[AutoSponge]

With or without ng-src, with or without ng-repeat, chrome repeatedly fails to reload an HTML5 video after navigating away then coming back to the page.

From a clean cache, I see 2 requests (first one Pending), second with 206 Partial Content. If I refresh, I see one request with 304 Not Modified. When I navigate away from the video view then return (either through a link or using back button), I get two requests for the video with just a Pending status. One of these will have a mime-type video/mp4 (correct), the other just says Pending.

[qaiser110]

Is anyone even looking at this issue???

[petebacondarwin]

Can you provide a running example of this issue?
Does it work on some browsers at all?
Have you checked whether browsers support changing the src attribute on HTML5 video elements after rendering?

[AutoSponge]

Sorry, the example app is not published yet.
Works fine in Safari.
As indicated above, I used both ng-src directive and a hard-coded src attribute with the same results.

[petebacondarwin]

What happens if you change the src with straight jQuery?
I wonder if this is actually a bug in the browser rather than AngularJS?

On 16 July 2013 22:31, Paul Grenier notifications@github.com wrote:

Sorry, the example app is not published yet.
Works fine in Safari.
As indicated above, I used both ng-src directive and a hard-coded src
attribute with the same results.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1352#issuecomment-21075654
.

[AutoSponge]

Even if I'm not changing the src (e.g., hard-code the video src attribute), the issue occurs. I don't have a way to simulate the problem away from Angular since Angular controls the content. I agree, it may be simply a problem in Chrome but I'm not sure how to test that.

[petebacondarwin]

What do you mean that Angular controls the content?

[AutoSponge]

The problem occurs when, using Angular's controller, the content changes, loading another view. Using the back button or a link to the previous route displays the former content but the video fails to load--every time. If it's an Angular issue, it's probably only in Chrome. My guess is that Chrome's aggressive caching and Angular's method for changing views can't agree on what should be loaded.

[egamonal]

@AutoSponge my test case was:
page 1 with a button to go to page 2
page 2 with a videojs player and a button to go back to page 1

navigate to page 1, then to page 2, video is loaded correctly.
click on button to go back to page 1, then go to page 2, google chrome stops using videojs. this happens because the videojs object was not removed when angular removed the element from the DOM, as expected. this isn't an angularjs (yay!)

Remove it before initializing the videojs player. I do this because I have a directive that adds a player. For example, if used in a directive:

... directive('mydir', ... {
    var vp;
    return {
        link: ..{ 
            if (vp) vp.dispose();
            vp = videojs("mp4video");
        }
    };`