74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.
With new material every week, we'll make sure that you stay ahead of the game.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Need help with MediaElement.js
Posted on 2016-09-07
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.
[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
-
7
5
12 Comments
Active today
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.
Active today
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.
Active today
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.
SOLUTION: I replaced the use of MediaElementJS with VideoJS. See solution code below:
<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
<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
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 13 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.