5
\$\begingroup\$

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

\$\endgroup\$
3
  • \$\begingroup\$ This looks great to me, perhaps work in a comment about which pieces in the code are there to support IE8 specifically? \$\endgroup\$
    – konijn
    Commented Mar 31, 2015 at 18:25
  • \$\begingroup\$ @konijn, Thanks! Nothing in this particular piece of code is related to IE8. I was just stating my reason for needing to build the directive \$\endgroup\$
    – Ronnie
    Commented Mar 31, 2015 at 21:05
  • 1
    \$\begingroup\$ Any reason for compile instead of the more standard link? \$\endgroup\$ Commented Apr 11, 2015 at 15:51

1 Answer 1

1
\$\begingroup\$

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}" />`);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.