Media Element not working in production

[magnuspaaske]

I'm using the gem, and it works smooth in development, but whenever I switch to production it doesn't work. Neither the success nor failure callback is fired when attaching it to a jquery element, however it also doesn't give an error. Messing with the options for how the JS-file is compiled it seems it's related to the compilation and combining of the javascript file, however this doesn't seem to make much sense.

Is this a common error, or what could have caused it?

[fusion2004]

Hmm, seems very odd. Can you post the version of rails you are using, your application.js manifest, the code you are using to attempt to run mediaelement on a jQuery object, and generally any more background you can give me?

[magnuspaaske]

Yep, of course. I'm using rails 4.0.3 The manifest looks like:

//= require jquery
//= require jquery_ujs
//= require jquery.cookie
//= require underscore
//= require foundation
//= require froogaloop
//= require mediaelement_rails/rails
//= require mapbox
//= require_tree .

The jQuery object looks like this (the error callback was only added to see if that could make a difference):

var players = $('.background-video video').mediaelementplayer({
                    features: [],
                    enableKeyboard: false,
                    enablePluginDebug: true,
                    loop: false,
                    success: function (mediaElement, domObject) {
                        if ( mejs.MediaFeatures.isiOS ) {
                            $('.mejs-layers, .mejs-controls').hide();
                        }

                        window.mediaElement = mediaElement;
                        window.domObject = domObject;

                        mediaElement.addEventListener('ended', function () {
    //                        mediaElement.setCurrentTime(parseFloat($(domObject).attr('data-rewindto')));
                            var time = parseFloat($(domObject).attr('data-rewindto'));
    //                        mediaElement.setCurrentTime(15.13); // #hack: should come from the a data-attribute
                            mediaElement.play();
                            mediaElement.setCurrentTime(time);
                        }, false);

                        mediaElement.addEventListener('canplay', function () {
                            mediaElement.play();
                            mediaElement.setVolume(0);
                        }, false);

                        mediaElement.addEventListener('play', function () {
                            var backgroundEl = $(domObject).parents().find('.background-inner');
                            backgroundEl.find('.waiting-background, .fallback-background').css('display', 'none');
                            backgroundEl.find('.mejs-video').css('display', 'block');
                        }, false);

                        console.log(mediaElement, domObject);
                    },
                    error: function () {
                        console.log('error 123');
                    }
                });

Let me know if there's more background you need from me :) Best, Magnus

[thomasjoyce]

i'm trying to fix this myself. Anyone has any pointers?

In my case, i believe it is a crossdomain issue which is preventing it to play in prod. The flash swf "flashmediaelement.swf" that is on my aws s3 server is preventing it to be played. The error i see is: Warning: Security issue detected. Player stopped"

Here are some reference research i stumble into: https://github.com/johndyer/mediaelement/issues/83

Apparently i need to add a file to crossdomain.xml:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" secure="false" />
</cross-domain-policy>

i'm still figuring it out myself since it is still not working. If anyone solve this, can you please mention it here. Thanks again for your help :- )

[fusion2004]

There's a separate swf file meant for cdn usage, I haven't looked into how it works and integrates with this gem. You could try uploading that to your s3 and see if it works for you.

[thomasjoyce]

oh i notice my current video is trying to play using the "flashmediaelement.swf". I will try the other flashmediaelement-cdn.swf you mention. Thanks for the tip off :- )

<div class="me-plugin" id="me_flash_0_container">
<embed id="me_flash_0" 
        name="me_flash_0" play="true" loop="false" 
       quality="high" bgcolor="#000000" wmode="transparent"
       allowscriptaccess="always" allowfullscreen="true" 
       type="application/x-shockwave-flash" 
       pluginspage="//www.macromedia.com/go/getflashplayer" 
       src="/assets/mediaelement_rails/flashmediaelement.swf" 
    flashvars="id=me_flash_0&amp;isvideo=true&amp;
autoplay=false&amp;preload=none&amp;width=280&amp;
startvolume=0.8&amp;timerrate=250&amp;flashstreamer=&amp;
height=380&amp;pseudostreamstart=start&amp;
file=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DsYiQRaxcyH4" 
width="280" height="380" 
scale="default" class="mejs-shim">
</div>

[thomasjoyce]

Mark, u da' man! :- ) Got it working now! Thanks for the tips, putting me to the correct direction! :- )

[fusion2004]

Yeah, I plan to better integrate that cdn-capable swf into the gem and the documentation sometime soon. Just need to find the time.

Glad I was able to help!

On Mon, Aug 4, 2014 at 10:03 PM, Thomas notifications@github.com wrote:

Mark, u da' man! :- ) Got it working now! Thanks for the tips, putting me to the correct direction! :- )

— Reply to this email directly or view it on GitHub https://github.com/tobsch/mediaelement_rails/issues/30#issuecomment-51141630 .

[thomasjoyce]

the latest version that just got release 2.15.0 2 days ago i believe have a bad cdn I try the upgrade with the flashmediaelement-cdn.swf and it did not work. I had to revert it back to the prev version which works.