Search code examples
javascriptflashpolymerwistia

PolymerJS Polyfill and flash compatibility

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

Solution

  • 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]();