Flash embed angular directive

Question

I have an app that uses HTML5 video and our customer still needs to support IE8 - Gross.

Anyway, I came up with this directive in AngularJS for embedding a SWF object for when I need to fallback to Flash. It works fine so far, but I would like to see if there is anything I can do to improve it. Can anyone see a case where this would fail? I am using Modernizr to detect if the browser supports video (Modernizr.video). If it doesn't then it falls back and I load this directive.

The directive:

'use strict';

angular.module('flash-embed', []).directive('flashEmbed', [function()
{
  return {
    restrict: 'A',
    replace: true,
    template: ['',
     '<object data="{{src}}" type="application/x-shockwave-flash">',
        '<param name="allowscriptaccess" value="always" />',
        '<param name="allowfullscreen" value="true" />',
        '<param name="wmode" value="transparent" />',
      '</object>'
    ].join(''),
    scope: {
      width: '@',
      height: '@',
      src: '@'
    },
    compile: function(elem, attrs, transcludeFn)
    {
      return function link (scope, element, attrs)
      {
        scope.$watch('src', function(src)
        {
          element.append('<param name="movie" value="' + src + '" />');
        });
      };
    }
  };
}]);

Its usage:

<div flash-embed src="testpreso/flash/preloader.swf" width="966" height="600"></div>

EDIT 5/8/2015 update

I am having trouble using this in IE8. A client of mine needs IE8 support, booo. The error I am getting in IE8 is:

[Object Error] description: "Invalid argument." message: "Invalid argument." name: "Error" number: -2147024809

It has to do with the object tag I believe. I found this thread that may shed some light on the issue: https://stackoverflow.com/questions/9150938/invalid-argument-in-ie-8-on-jquery-prepend-on-flash-objects

I will update if I figure this out

Answer 1

One would hope that this code could have been replaced with newer technologies, especially given IE8 isn’t supported by Microsoft anymore and Adobe no longer supports Flash Player after December 31, 2020. Additionally “AngularJS support has officially ended as of January 2022”. A framework like VueJS might be a good substitute for the AngularJS.

The line that adds the param tag with the movie source is a bit on the long side, and the fact that it is nested in a few functions doesn’t help:

element.append('<param name="movie" value="' + src + '" />');

This could be simplified slightly using the ES6 feature template literals:

element.append(`<param name="movie" value="${src}" />`);