Can't play some FLV files + Some old issues

[ignaciogros]

Hi, Rafael. Thanks a lot for maintaining MediaElement.

I'd like tu update eXeLearning's (https://github.com/exelearning/iteexe) version, but I found some problems:

• Some FLV videos won't play.
• There are some problems in IE11 (the video size is changed and the video won't play).
• You need extra JavaScript to keep the alignment.

I attach 2 versions (the mediaelement.js file is called exe_media.js in both cases, and it's loaded by common.js):

• mediaelement-2: Both FLV videos work, the size problem in IE11 is fixed (see line 101 in exe_media.js), and the video keeps its alignment ($exe.alignMediaElement in common.js).
• mediaelement-4: Only one video works (none in IE11), the size problem in that browser is not fixed, the video keeps its alignment ($exe.alignMediaElement in common.js).

Just open the index.html files.

Thank you very much.

mediaelement-issues.zip

[rafa8626]

Thanks for reporting this. I'll take a look and keep you posted

[rafa8626]

Ok I've checked your test files and you will need to update this first on common.js:

     // Start MediaElement
     init: function() {
            $exe.mediaelements.mediaelementplayer({
                renderers: ['flash_video', 'html5'],
                stretching: 'none',
                pluginPath: typeof eXe !== 'undefined' ? '../scripts/mediaelement/' : ''
            }).show().each(function() {
                $exe.alignMediaElement(this)
            })
        }

I noticed that there's a JS code adding a display:inline to the video tag and that causes issues when we are dealing with Flash. You really wanna avoid using that. Other than that I think the update I posted fixes both of your issues. Let me know if it worked for you

[rafa8626]

Please star the project to continue supporting it. Thanks

[ignaciogros]

Thanks, Rafael!

1.- I can't find the code that adds display:inline. Where did you see it?

2.- I tested in Windows with Firefox, G. Chrome and IE11:

video-sample.flv:

• renderers: ['flash_video', 'html5'] - It doesn't work in G. Chrome
• renderers: ['html5', 'flash_video'] - It doesn't work in G. Chrome
• No renderers - It doesn't work in Firefox and G. Chrome

http://la2.indexcom.com/me/flv/guqin.flv:

• renderers: ['flash_video', 'html5'] - It doesn't work in G. Chrome
• renderers: ['html5', 'flash_video'] - It doesn't work in G. Chrome
• No renderers - It works in all cases

Isn't 'html5', 'flash_video' the default setting? I think that trying to use HTML5 video in the first place would de better.

3.- This is not important: I had to remove from common.js the part that hides the videos and shows them again after aligning them. Otherwise the video was displayed in the wrong place. Example:

Please star the project to continue supporting it. Thanks

Done! Thank you!

[rafa8626]

The display: inline is what is causing that video to be in the wrong place. But I don't know which Javascript might be doing it because is not on MEJS. Now, as far as the renderers, since you are using I set it in that order because I didn't know if you had more video types. If you have also MP4, then yes, html5, flash_video is what you have to use.

[rafa8626]

'html5', 'flash_video' is not the default setting: there are more renderers, including a native_flv which uses flv.js library. That library has some restrictions, so that's why sometimes FLV plays and sometimes don't. That's why you need to try to use Flash overall if you can't change your FLVs accordingly. At the same time, most of the browsers are deprecating Flash (Chrome, Edge and FF, for now), so at some point Flash is not gonna work at all. My advise always is to strive to use native but you may need to check the flv.js project to see requirements for videos, or change FLV to MP4

[rafa8626]

Let me know if you have any other questions, and thanks for starring the project

[ignaciogros]

Hi, Rafael.

Is it possible to set different renderers to each media file in the page? Something like:

$exe.mediaelements.mediaelementplayer({
    renderers: getRenderers(),
    stretching: 'none',
    pluginPath: typeof eXe !== 'undefined' ? '../scripts/mediaelement/' : ''
});

In that case, I could set ['html5', 'flash_video', 'native_flv'] for the FLV files and [] for the rest (we don't know what video or audio will be played).

Another thing: When I try to play FLV in G. Chrome I get no error message. errorContent is empty, so I had to do this in mediaelement-and-player.js (line 4206):

if (!errorContent) {
    var lnk = t.media.originalNode.getAttribute('src');
    if (lnk) {
        errorContent = '<p><a href="' + lnk + '" download><span>' + _mejs2.default.i18n.t('mejs.download-file') + ': ' + lnk + '</span></a></p>';
    }
}

You might find a better way to fix that...

Thank you!

[rafa8626]

If you play only one media file per page, yes you can. I will check the error content since it must display things correctly unless there's something missing on the renderer. Can you provide the URL to see that issue please?

[rafa8626]

If you use something like this it will work for your scenario, I think no matter how many instances per page you have:

$exe.mediaelements.each(function(i, element) {
         // Or however your video tags are configured to find the source to be played
         var isFlv = $(element).attr('src').indexOf('flv') > -1;
         new MediaElementPlayer(element, {
               renderers: isFlv ? ['flash_video'] : [],
               stretching: 'none',
               pluginPath: typeof eXe !== 'undefined' ? '../scripts/mediaelement/' : ''
        });
}).show();

Just let me know the URL for the error issue so I can check why is not displaying anything

[ignaciogros]

Yes! Thanks for that code. The renderers part is solved. I don't know if the plugin should do that by default...

Please try this in G. Chrome (no error is displayed): http://gros.es/tests/exelearning/mediaelement/

With the code in line 4206 to check errorContent: http://gros.es/tests/exelearning/mediaelement/?test=true

[rafa8626]

Perfect! I'll check the error issue. And no, the player should remain like it is because we don't know what circumstances the other users might be facing.

[rafa8626]

OK download the master branch and test the error issue. I had a missing layer to display errors on native renderers. Let me know

[ignaciogros]

I still see no error message in G. Chrome: http://gros.es/tests/exelearning/mediaelement-master/

[rafa8626]

Hmmm ok let me check it again. I had the issues being displayed if I used the local file. Can you try that, please?

[rafa8626]

Interesting. I do see an error if I put this on the demo file; I don't know what's causing the effect on your side, because I am able to even see the console.error, and I don't see it on yours:

[ignaciogros]

I tried a cleaner code (HTML5, just those JS files, etc.) just in case, but I still get no error messages in G. Chrome (on Windows): http://gros.es/tests/exelearning/mediaelement-master/clean.html Do you?

The error message is displayed if I set a customError. FR: It would be easier to show a link If you could use a function there: customError: function(element) { ... }

Could you provide the URL where you can see the error messages? I tried in different servers.

Thanks.

[rafa8626]

I don't see any errors on your URL because I could see the videos in your page. I don't have a URL but the main website has the latest code. I agree with the customError and I'll implement that. I tested this on MacOSX and worked for me (I got a square indicating that Flash needed to be activated prior playing them, but that's it)

[rafa8626]

As an example, in the main website choose FLV, press play and click on the progress bar to a point that is not loaded yet. You can see the error being displayed

[rafa8626]

I see in your statement about customError that you have an argument. What do you mean with element? Because it will be easier to set a method with no args right now

[ignaciogros]

Hi, Rafael.

I see in your statement about customError that you have an argument. What do you mean with element? Because it will be easier to set a method with no args right now

The video element object ([HTMLVideoElement]), so you can get the currentSrc, for example, or even 2 arguments: The MediaElement object and the HTML element.

[rafa8626]

Sounds good I'll add it today. Other than that I think that's it. Can this ticket be closed?

[ignaciogros]

Of course! Closed.

Thanks a lot, Rafael!

[rafa8626]

You are very welcome. Thank you for providing feedback and making a better player with your suggestions. BTW, the callback for customError is now implemented, so download the master branch and test it please. It accepts now the 2 arguments you mentioned above per your suggestion

[ignaciogros]

I see the changes in the errorContent definition, but the arguments are missing, at least in my tests: http://gros.es/tests/exelearning/mediaelement-master/clean.html

Try this one (FLV + renderers: ['html5']) in Firefox if you get no error in G. Chrome: http://gros.es/tests/exelearning/mediaelement-master/html5.html

[rafa8626]

Ok I'll check this and let you know. Thanks

[rafa8626]

I got it. I was using the wrong variables. Please download the master branch and let me know if it works now. Thanks for pointing this.

[ignaciogros]

It works. Thank you!

[rafa8626]

You are welcome I'm glad it works now