PolymerJS Polyfill and flash compatibility

Question

I am trying to integrate some of the new polymer custom elements into a project that I am working on and one of the requirements is that the app can upload videos to a third party service(Wistia). This third party service provides an upload widget which uses flash but the platformJS polyfill that is provided with polymer is affecting the flash object created and breaks the widget. I'm not a flash developer and don't know a lot about how flash in the browser works, but if anyone knows another way to instantiate the flash object so that it will work with the platformjs polyfill or of a way to selectively exclude the polyfill I would really appreciate the insight.

Flash Object Initialization Code (from http://static.wistia.com/javascripts/upload_widget.js)

containerElement = document.

getElementById(this.settings.flash_container_id);
containerElement.innerHTML =
['<object id="', this.movieName, '" type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.flash_width, '" height="', this.settings.flash_height, '" style="-moz-user-focus: ignore;">',
            '<param name="movie" value="', this.settings.flash_url, '" />',
            '<param name="bgcolor" value="', this.settings.flash_color, '" />',
            '<param name="quality" value="high" />',
            '<param name="menu" value="false" />',
            '<param name="wmode" value="', this.settings.flash_wmode ,'" />',
            '<param name="allowScriptAccess" value="always" />',
            '<param name="flashvars" value="' + this.getFlashVars() + '" />',
            '</object>'].join("");

Now the problem is that when the object is instantiated like this without the platformjs polyfill in place then the flash functions can be called like so

var movieElement = document.getElementById(FLASH_OBJECT_ELEMENT_ID);
movieElement[functionName]()

Any insight on this matter would be greatly appreciated, thanks

After looking into it a bit more, it appears that all of the flash functions of the object are still available on an impl object found on the new — user3833530, Jul 18 '14 at 17:14

Peter Burns · Accepted Answer · 2014-07-20T18:30:00.553

1

As you've noticed in your comment above, when the shadow dom isn't provided natively then elements that you get with query selectors are wrapped in order to polyfill the encapsulation of the shadow dom. These wrapped elements don't expose everything on the wrapped objects. In order to work in browsers both with and without a native shadow dom implementation, try this:

var movieElement = unwrap(document.getElementById(FLASH_OBJECT_ELEMENT_ID));
movieElement[functionName]();

edited Jul 20 '14 at 18:30

answered Jul 18 '14 at 22:02

Peter Burns

44,401
7
38
56

Minor note: instead of `movieElement = movieElement.impl || movieElement;` you should do `movieElement = wrap(movieElement)`. – Scott Miles Jul 18 '14 at 23:38

PolymerJS Polyfill and flash compatibility

1 Answers1