Solved

Need help with MediaElement.js

Posted on 2016-09-07

1 solution

207 Views

Last Modified: 2016-09-13

Hi,

Based on the latest version (2.22) of mediaelement-and-player.js from http://mediaelementjs.com, mediaelement.js should support HLS (m3u8 format), but for some reason, the following code is not working. Could someone please tell me what's wrong? What am I missing?

var player = new MediaElementPlayer("#myVideo", {
type: "video/m3u8",
success: function (mediaElement, domObject) {
var sources = [ { src: "http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8", type: "application/x-mpegURL" } ];

mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
}
});

When the above code is run, I see the video player appears with the hour glass running but the video never plays, and I don't receive any error neither.

Any help is appreciated.

Many thanks in advance.

Comment

Question by:WebAppDeveloper

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

12 Comments

LVL 57

Expert Comment

by:Julian Hansen

ID: 417884102016-09-07

Where on their page did you find the reference for how you have constructed your mediaelementplayer - it does not seem to match their docs

184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8

Author Comment

by:WebAppDeveloper

ID: 417884722016-09-07

Julian,

I forgot what website i got it from, but i am sure I got it from one their forums or a legit google search results. Anyways, if you replace the source and type of the above code with the mp4 equivalents, it will work. See below. This is a working example but playing mp4 instead of HLS m3u8:

<link href="http://vjs.zencdn.net/5.11.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.11.6/video.js"></script>

<video id="myVideoID"></video>
var player = new MediaElementPlayer('#myVideoID', {
       type: "video/mp4",
       success: function (mediaElement, domObject) {
       var sources = [
       { src: "http://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" }
       ];

       mediaElement.setSrc(sources);
       mediaElement.load();
       mediaElement.play();
       }
      });

LVL 57

Expert Comment

by:Julian Hansen

ID: 417884822016-09-07

But that is a media file not a playlist ?

Author Comment

by:WebAppDeveloper

ID: 417885152016-09-07

Julian,

What I was trying to say is the javascript code above works if it's a media file not a playlist (m3u8), but MediaElementJS claims that they already added HLS (m3u8) support to their latest library (mediaelement-and-player.js) so everybody can start using it. The problem is I don't know exactly how to use it. The original code above containing [ { src: "http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8", type: "application/x-mpegURL" } ] is not working, so I wonder if you know how to make it work, I'd greatly appreciate it.

Many thanks in advance.

LVL 57

Expert Comment

by:Julian Hansen

ID: 417885742016-09-07

Do they not provide a sample? I took a brief look through their download specifically at the demos and found this sample
demo/mediaelementplayer-hls.html

Which has the option to load and play a playlist - however when you try it it does not work and gives an error in the console.

If their sample does not work then maybe need to contact them and find out if there is a fix.

Author Comment

by:WebAppDeveloper

ID: 417886782016-09-07

Julian,

I tried demo/mediaelementplayer-hls.html too, and it didn't work for me neither. I posted this same question on stackoverflow.com where the MediaElementJS members usually go to to answer any MediaElementJS related issues/questions, but so far I have not received any response.

VideoJS supports HLS (m3u8) and I've been able to get HTL working using VideoJS but the problem with VideoJS is that they don't fallback as perfectly as I expect when HTML5 does not exist in user's browser.

LVL 57

Expert Comment

by:Julian Hansen

ID: 417887732016-09-07

don't fallback as perfectly as I expect when HTML5 does not exist in user's browser

What % of browsers don't support HTML5 - must be pretty small by now.

Author Comment

by:WebAppDeveloper

ID: 417888112016-09-07

Yeah it's pretty small by now. The reason is currently my company is using MediaElementJS and so far so good because MediaElementJS automatically simulates / creates a video player that looks like the HTML5 video player when the browser does not support HTML5. That's why I want to leave it as is and simply find a way to make MediaElementJS work with HLS which is a new requirement from my company. When I found out that the current version of MediaElementJS supports HLS I was so happy but too bad it doesn't work and they don't have any documentation on how to use it neither, so I think what I'm going to do is write a javascript wrapper that uses the current existing library (MediaElementJS) if the video file extension is not m3u8; otherwise, use VideoJS (if extension is m3u8)

Author Comment

by:WebAppDeveloper

ID: 417890182016-09-07

Julian,

I've gone ahead and completely replaced MediaElement.js with Video.js since Video.js supports both HLS and non-HLS perfectly. Everything seems to be fine now.

Please go ahead and close this issue since I am not able to make my own answer as the solution.

I thank you very much for all your time.

LVL 57

Expert Comment

by:Julian Hansen

ID: 417890732016-09-07

You can choose your own answer - just click the option to accept it.

Accepted Solution

by:WebAppDeveloper

WebAppDeveloper earned 0 total points

ID: 417905962016-09-08

SOLUTION: I replaced the use of MediaElementJS with VideoJS. See solution code below:

<link rel="stylesheet" type="text/css" href=“local_videojs/video-js.min.css" />
<link rel="stylesheet" type="text/javascript" href=“local_videojs/video.min.js" />
<link rel="stylesheet" type="text/javascript" href=“local_videojs/videojs-contrib-hls.js" />

<video id="myVideo" controls autoplay preload="auto" width=“640” height=“400” class="video-js vjs-default-skin vjs-big-play-centered">
<source src="my_videos/myHLSFIle.m3u8" type=“application/x-mpegURL”>
</video>

Source type must be "application/x-mpegURL".

The key to this solution is the HLS library <link rel="stylesheet" type="text/javascript" href=“local_videojs/videojs-contrib-hls.js" />, and you can download it from: https://github.com/videojs/videojs-contrib-hls

The myHLSFIle.m3u8 file is a plain text file with something like this in there (the entire video was broken down into smaller chunks of ts media files, ts1.ts, ts2.ts, ts3.ts, ts4.ts, bla, bla...):
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:6
#EXTINF:6.000,
ts1.ts
#EXTINF:3.000,
ts2.ts
#EXTINF:3.000,
ts3.ts
#EXTINF:6.000,
ts4.ts
#EXTINF:3.000,
ts5.ts
#EXTINF:3.000,
ts6.ts
#EXTINF:6.000,
ts7.ts
#EXTINF:3.000,
ts8.ts
#EXTINF:3.000,
ts9.ts
#EXTINF:6.000,
ts10.ts
#EXTINF:3.000,
ts11.ts
#EXT-X-ENDLIST

Author Closing Comment

by:WebAppDeveloper

ID: 417957052016-09-13

Because Julian said I could accept my solution.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Using a drop down box to populate a second drop down box

Article by: cstsang

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …

Creating linked dropdowns using jQuery and PHP

Article by: Julian

This article discusses how to create an extensible mechanism for linked drop downs.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)