Media element js – A HTML5/Jquery Video Player – Streaming Video Not working issue – A Quick Solution


Recently I have worked in an HTML 5 App for Ipad. It was basically video presentation framework. initially the requirement was like a video which we need to play in iPad with all other features of of Video Presentation. It’s exactly like replacing a flash/silverlight application to JQUERY/HTML5. we have done same with MediaElement.js


But after getting ‘wow ” from client, they were asked us to replace the video with a streaming video. But the url given was not a video link. It’s like youtube video links. It was simply out puts a video player on clicking the link. On close inspection it was observed that it was made by usin of jwpalyer(!!) – another wonderful HTML5/Jquery Video Player . So the its become the much easier for us. Because the video is hard coded (!!!).

But on sudden we realized that video is not playing with Medialementjs code. But the video link is downloadable. Video html5 code was as below,

< video width="320" height="240" src="http://STREAMINSERVERLINK.COM/myvideo.mp4?KEY=MY_KEY">

But Video player is not detecting the video!!

It was head aching situation we build everything based on the player. So it will hard for us to replace the player.


After a long(~15mins), I found a real issue.

Player detecting file extension from characters of last “.” . This is made issue as API_KEY.. are considerded as extension.

I think medielementjs team has to work work on this to avoid this type of silly mistakes

To escape from this I made a dirty fix which was awesome fix and give me winder full feedback from client.

< video width="320" height="240" src="http://STREAMINSERVERLINK.COM/myvideo.mp4?KEY=MY_KEY&extn=filename.mp4">

You may wonder, what I did to fix this. It is quite simple just added one more GET parameter with value ends with real video extension, which will help the player to understand the real file extension.

Though it was a simple fix it can hurt your valuable time

Subin George