ngSrc doesn't work with <embed>

[IgorMinar]

The following doesn't work because browsers don't react to the change of src attribute after the initial load

  <object> 
      <embed ng:src="{{video.embedUrl}}" type="application/x-shockwave-flash" allowscriptaccess="always"
             allowfullscreen="true" width="450" height="274">
      </embed>
    </object> 

http://www.codingforums.com/showthread.php?t=35800

[IgorMinar]

one solution that comes to my mind:

we should create a embed widget that will correct this behavior for ng:src by doing the following if embed has ng:src attribute:

• remove self from the document dom
• start watching ng:src expression
• add a clone (or replace if already exists) with the correct src attribute and value every time ng:src evaluates to a new thing

[tgvashworth]

Hey Igor, I'm running into trouble with this. Is there a fix?

[tgvashworth]

Actually, I've got it figured out, I'll submit a pull request when I get some time.

[zcourts]

Has this been resolved in any version yet?

[MatejBalantic]

Uf, this is a show stopper. Is there any work around? I can't find a way to use without manipulating DOM

[tgvashworth]

My directive for this is:

app.directive('embedSrc', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var current = element;
      scope.$watch(attrs.embedSrc, function () {
        var clone = element
                      .clone()
                      .attr('src', attrs.embedSrc);
        current.replaceWith(clone);
        current = clone;
      });
    }
  };
})

<embed embed-src="...">

It's probably a bit hacky but it works.

[phil-travelbytes]

An embed element is still needed. This was raised 2 years ago, is it going to be in any update soon?

[kolosy]

@PhUU that worked for me, with one modification - the first parameter to $watch(...) needs to be a function that returns attrs.embedSrc:

 scope.$watch(function() { return attrs.embedSrc; }, ...

This problem also occurs with object elements

[sirMackk]

@PhUU - great suggestion! It worked fine for me with the minor modification from @kolosy.

It would be great to have this in a release. I understand that might not be used as often as ng-src, but there's still some people who would benefit from this tag. Is there anything wrong with @PhUU's code?

[btford]

@PhUU would you mind putting together a PR?

[rjungemann]

This is an issue with video tag as well. And this is indeed still an issue, and has been for 3 years now.

[caitp]

I don't believe you actually need to do this (this being cloning elements) for the video/audio tags. We can use the DOM api to make this work correctly (I have a project I started a while ago called ng-media which aims to provide some of these niceties for audio/video tags in a similar fashion).

Some of it could be a tiny bit complicated (like dealing with multiple sources and multiple tracks and video overlays), but not all of that is needed for the core probably.

Anyways, http://jsfiddle.net/g3zWW/ here's a basic example of how it would work.

It might be a bit tricky to change ng-src itself for this, but could easily write some element directives for the video and audio tags to use the native api for this.

Anyways, there's no need to clone elements for this in any browsers that I'm aware of. (although the demo won't work in FF due to the codecs not being supported, and the video only having a single source)

[rjungemann]

@caitp, I think you are right, this works for me:

app.directive('embedSrc', function () {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(
        function() {
          return attrs.embedSrc;
        },
        function() {
          element.attr('src', attrs.embedSrc);
        }
      );
    }
  };
});

Still, this is an issue that should be fixed within the AngularJS library. If ng-src works for images, I imagine it should work for other elements as well.