Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.
Need help with MediaElement.js
Hi,
Based on the latest version (2.22) of mediaelement-and-player.js
var player = new MediaElementPlayer("#myVid
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(source
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.
Based on the latest version (2.22) of mediaelement-and-player.js
var player = new MediaElementPlayer("#myVid
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(source
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.
Who is Participating?
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:Bi
184.72.239.149/vod/smil:Bi
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('#myVid
type: "video/mp4",
success: function (mediaElement, domObject) {
var sources = [
{ src: "http://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" }
];
mediaElement.setSrc(source
mediaElement.load();
mediaElement.play();
}
});
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('#myVid
type: "video/mp4",
success: function (mediaElement, domObject) {
var sources = [
{ src: "http://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" }
];
mediaElement.setSrc(source
mediaElement.load();
mediaElement.play();
}
});
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.j
Many thanks in advance.
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.j
Many thanks in advance.
Do they not provide a sample? I took a brief look through their download specifically at the demos and found this sample
demo/mediaelementplayer-hl
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.
demo/mediaelementplayer-hl
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.
Julian,
I tried demo/mediaelementplayer-hl
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.
I tried demo/mediaelementplayer-hl
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.
don't fallback as perfectly as I expect when HTML5 does not exist in user's browserWhat % of browsers don't support HTML5 - must be pretty small by now.
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)
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.
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.
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.
All Courses
From novice to tech pro — start learning today.
<link rel="stylesheet" type="text/css" href=“local_videojs/video-
<link rel="stylesheet" type="text/javascript" href=“local_videojs/video.
<link rel="stylesheet" type="text/javascript" href=“local_videojs/videoj
<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.m
</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/videoj
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