• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 547
  • Last Modified:

Need help with MediaElement.js

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.
0
WebAppDeveloper
Asked:
WebAppDeveloper
Advertise Here
  • 7
  • 5
1 Solution
 
Julian HansenCommented:
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
0
 
WebAppDeveloperAuthor Commented:
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();
          }
      });
0
 
Julian HansenCommented:
But that is a media file not a playlist ?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Go Premium
 
WebAppDeveloperAuthor Commented:
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.
0
 
Julian HansenCommented:
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.
0
 
WebAppDeveloperAuthor Commented:
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.
0
 
Julian HansenCommented:
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.
0
 
WebAppDeveloperAuthor Commented:
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)
0
 
WebAppDeveloperAuthor Commented:
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.
0
 
Julian HansenCommented:
You can choose your own answer - just click the option to accept it.
0
 
WebAppDeveloperAuthor Commented:
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
0
 
WebAppDeveloperAuthor Commented:
Because Julian said I could accept my solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
  • 7
  • 5
Advertise Here
Tackle projects and never again get stuck behind a technical roadblock.
Join Now