Solved

Need help with MediaElement.js

Posted on 2016-09-07
12
28 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.
0
Comment
Question by:WebAppDeveloper
  • 7
  • 5
12 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788410
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
 

Author Comment

by:WebAppDeveloper
ID: 41788472
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788482
But that is a media file not a playlist ?
0
 

Author Comment

by:WebAppDeveloper
ID: 41788515
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788574
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
 

Author Comment

by:WebAppDeveloper
ID: 41788678
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788773
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
 

Author Comment

by:WebAppDeveloper
ID: 41788811
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
 

Author Comment

by:WebAppDeveloper
ID: 41789018
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41789073
You can choose your own answer - just click the option to accept it.
0
 

Accepted Solution

by:
WebAppDeveloper earned 0 total points
ID: 41790596
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
 

Author Closing Comment

by:WebAppDeveloper
ID: 41795705
Because Julian said I could accept my solution.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now