EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER
| Creating a video player using HTML5 is not too difficult. But it only plays some
video formats such as MP4, OGG, WEBM. To watch more video formats, we must use the HTML5 video player plugin. I tried "Mediaelement.js" and found it great: in addition to the above mentioned formats, it can play YouTube, DaylyMotion, SoundCloud, Facebook, Vimeo, HLS, Dash, FLV and others. |
|
However in the sample for playlist, the player only plays mp4, mp3, ogg, webm and youtube.
Meanwhile, the demo file can play a lot of formats but only play 1 video (when it is clicked) and stops.
All the scripts are very short. Most just include only one function with multiple arguments to build the player. Nothing more.
So I looked at the source code of the "mediaelement-js.com" page, where all js files are online and have more functions. However, it is very difficult for me because I barely know anything about advanced javascript. I can only make a few changes to make the player work as I want. The lines of my code are awkward. Please correct it, make the code more reasonable.
- First of all, I make the video size smaller and place it into the center (using "margin:auto").
- Secondly: I dropped style="max-width:100%;" because it changed the height of the video screen.
- Then I changed the playlist from the select-option form to ul-li form. So I can see not only one but several items.
- Because I have a banner at the top of the page and want to put the audio menu there so I have to separate the items of <ul id = "play-list2"> into 2 uls:
<li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> HAPPY NEW YEAR - ABBA</span></li>
=> <li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> N0</span></li> inside <ul id="play-list2">
and
<li<span class="play-item" onclick="music(0)">HAPPY NEW YEAR - ABBA</span></li> inside <ul id="play-list0">.
- Finally, I modified the javascript code where needed and added some functions.
Originally the "player" variable was local, and I changed it to global.
I also use a global variable, which is "currentV" to remember the order number of the currently playing video.
<ul id="play-list0" style="color:white;cursor:pointer;text-align:left">
<li><span class="play-item" onclick="music(0)">HAPPY NEW YEAR - ABBA</span></li>
<li><span class="play-item" onclick="music(1)">La Comparsa</span></li>
</ul>
<script>
var player;
sourcesSelector = $('#play-list1, #play-list2');
sourcesTotal = sourcesSelector.length;
for (var i = 0; i < sourcesTotal; i++) {
sourcesSelector.eq(i).find('.play-item').on('click', function (e) {
var media = e.target.closest('.media-container').querySelector('.mejs__container').id;
player = mejs.players[media];
player.setSrc(e.target.title.replace('&', '&'));
link = $(this);
currentV = link.parent().index();
$('#play-list1 .play-item').removeClass('active');
$('#play-list2 .play-item').removeClass('active');
link.addClass('active');
player.load();
player.play();
});
$('#play-list0 .play-item').on('click', function(e){
link = $(this);
$('#play-list0 .play-item').removeClass('active');
link.addClass('active');
})
currentV = 0;
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
for (var i = 0; i < total; i++) {
new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';
}
$('#div-list2').hide();
}
});
}
document.getElementById('player2').addEventListener('ended', function(e) {
var tracks = $('#play-list2').find('li');
var len = tracks.length;
currentV++;
if(currentV == len){
currentV = 0;
}
$('#play-list0 .play-item').eq(currentV).click();
});
}); /* end of addEventListener('DOMContentLoaded' ... */
function music(num){
$('#play-list2 .play-item').eq(num).click();
}
/* FROM: https://github.com/mediaelement/mediaelement
- If you want to use Flash shims from a CDN, do the change related to pluginPath
setting the CDN's URL, and also setting shimScriptAccess configuration as always.
- By default, MediaElement has bundled native renderers, such as HLS, M(PEG)-DASH
and FLV, as well as YouTube and Flash shims.
If you want to use any other renderer, you MUST refer to the build/renderers folder
and add as many as you want.
Check demo/index.html for a better reference.
- If your installation relies on the legacy player classes (i.e., mejs-player,
mejs-container, etc.), you must set up the proper namespace. In 2.x, the default
namespace is mejs- but now is mejs__. In order to set up a new namespace (or the
legacy one), use the classPrefix configuration, and make sure you use the
mediaelementplayer-legacy stylesheet provided in the /build/ folder.
- In general, MediaElement.js supports IE11+, MS Edge, Chrome, Firefox, Safari,
iOS 8+ and Android 4.0+.
It is strongly recommended to read the entire documentation and check the demo
folder to get the most out of this package. */
There are 2 ways to try this page:
1- Copy the code below to create a file "index.html".
Very quickly, but the banner slideshow can not work because it lacks 8 image files.
You also have to replace my MP3 files with the MP3 files you have on your PC.
2. Open the following web and download to your PC 1 zip file (24.6 MB):
http://www.mediafire.com/file/5h5ac0joey1x5a6/my-media-player1.zip
You will have:
- File "index.html.
- All image files.
- 5 MP3 files for audio player.
NOTE: SORRY In the file "http://www.mediafire.com/file/2na6f7ap67qg06k/my-media-player.zip", the index.html file has a wrong line.
So I replaced that file with the following file:
http://www.mediafire.com/file/5h5ac0joey1x5a6/my-media-player1.zip
<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Sample Media Player using HTML5's Media API</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css"> <style> body{ margin:0px; padding:0px; font-family:Arial; font-size:11pt; background-color:#99CC66; } #play-list1, #play-list2, #play-list0 { padding:0; font-size:12px; list-style-type:none; } #play-list1 span.active, #play-list2 span.active, #play-list0 span.active{color:#99FFFF;text-decoration:none;} #play-list1 li, #play-list2 li, #play-list0 li { color:white; cursor:pointer; padding-left:15px; font-size:10pt; } .list{width:700px;height:150px;overflow:auto;background:#363;margin-top:10px;margin:auto; line-height:140%} pre{width:850px;} button{background-color:#DDDDDD; cursor:pointer} #slideshow { position: relative; width: 675px; height: 85px; padding: 0px; } #slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } .play-item:hover{color:#5DB0E6} </style> </head> <body> <div align='center'> <table id='bannerTab' border-collapse:collapse; border"0" style="width:930px;height:80px;"><tr> <td style="width:675px; overflow-x: hidden; overflow-y: hidden;background-color:#336633;vertical-align:top;text-align:center"> <!------------------- ADD MORE IMAGE 675(px)x85(px) HERE ----------------------> <div id="slideshow"> <div> <img src="fish-banner2.png"> </div> <div> <img src="rung1.jpg"> </div> <div> <img src="tulip2.png"> </div> <div> <img src="world-new-year.png"> </div> <div> <img src="canh-dong.png"> </div> <div> <img src="hoa-buom-tim.png"> </div> <div> <img src="balloons.png"> </div> <div> <img src="bannerHo-guom-height-85px.jpg"> </div> </div> <!-----------------------------------------------------------------------------> <div style="font-family:'Times';width:675px;font-size:16pt;color:white;text-align:center;padding-top:7px;height:26px;"> <b><i>Happy New Year 2018!</i></b> </div> </td><td style="width:225px;height:125px;vertical-align:top;background:#363;text-align:center"> <div style="border:3px solid #CCCCCC;width:240px;height:91px; overflow-x: hidden;overflow-y: auto;margin:0px; background:#363;margin-bottom:7px"> <!------------------------- ADD MORE AUDIO FILES HERE -----------------------> <ul id="play-list0" style="color:white;cursor:pointer;text-align:left"> <li><span class="play-item" onclick="music(0)">HAPPY NEW YEAR - ABBA</span></li> <li><span class="play-item" onclick="music(1)">La Comparsa</span></li> <li><span class="play-item" onclick="music(2)">Moscow Nights</span></li> <li><span class="play-item" onclick="music(3)">HOW CAN I TELL HER</span></li> </ul> <!----------------------------------------------------------------------------> </div> <div style="text-align:center"> <span style="color:white; font-size:10pt">MP3 - CLICK TO LISTEN </span> </div> </td></tr> </table> <div class="media-container"> <div class="player" style="width:300px;height:40px;margin:8px;"> <audio id="player2" preload="none" controls style="max-width: 100%"> <source src="HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3" type=""> </audio> </div> <div id ='div-list2' class="list" style="height:100px;"> <ul id="play-list2" style='text-align:left;'> <li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> LOCAL MP3 HAPPY NEW YEAR - ABBA (downloaded from youtube.com - 4.8 MB)</span></li> <li><span class="play-item" title='La Comparsa - keyboard Tyros (chromatic) by Paul(1).mp3'> La Comparsa - keyboard Tyros</span></li> <li><span class="play-item" title='Moscow Nights - keyboard Tyros (chromatic) by Paul.mp3'> Moscow Nights</span></li> <li><span class="play-item" title='HOW CAN I TELL HER - PIANO COVER.mp3'> HOW CAN I TELL HER - PIANO COVER</span></li> </ul> </div> </div> <b style="font-size:14pt;">MODIFYING HTML5 MEDIAELEMENT PLAYER</b> </b><br> <fieldset id="fsVideo1" style="width:912px;padding:4px;color:white;border:6px #999999 inset;"> <legend style="font-size:16px;border:2px white solid;background:#666666"><b><i> VIDEO </i></b></legend> <div class="media-container" > <br> <div class="player" style="width:900px;height:540px;margin:auto;"> <video id="player1" width="900" height="540" preload="metadata" style="" controls poster="images/big_buck_bunny.jpg" playsinline webkit-playsinline> <source src="https://www.youtube.com/watch?v=wVuOtaID1Rk" type=""> <track src="" srclang="en" label="English" kind="subtitles" type="text/vtt"> </video> </div> <br> <div class="list" style="height:auto;padding:3px"> VIDEO: YOUTUBE, DAYLYMOTION, VIMEO, MP4, FLV, WEBM, HLS, DASH ... - CLICK TO WATCH<br> Please wait while the video is loading! Move the cursor in the video screen to see the control bar </div> <div class="list" style="border:3px solid #CCCCCC;"> <ul id="play-list1" style='text-align:left'> <li><span class="play-item" title='https://www.youtube.com/watch?v=wVuOtaID1Rk'> YOUTUBE London to Istanbul by train (https://www.youtube.com/watch?v=wVuOtaID1Rk)</span></li> <li><span class="play-item" title='https://player.vimeo.com/video/108018156?byline=0&portrait=0&badge=0'> VIMEO (https://player.vimeo.com/video/108018156?title=0&byline=0&portrait=0&badge=0)</span></li> <!-- title=0 was removed --> <li><span class="play-item" title='https://www.dailymotion.com/video/x11prnt'> DAYLYMOTION (https://www.dailymotion.com/video/x11prnt)</span></li> <li><span class="play-item" title='https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'> WEBM (https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm)</span></li> <li><span class="play-item" title='http://www.streambox.fr/playlists/test_001/stream.m3u8'> HLS (http://www.streambox.fr/playlists/test_001/stream.m3u8)</span></li> <li><span class="play-item" title='http://la2.indexcom.com/me/flv/guqin.flv'> FLV (http://la2.indexcom.com/me/flv/guqin.flv)</span></li> <li><span class="play-item" title='http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd'> M(PEG)-DASH (http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=9cCHq269OWs'> YOUTUBE Videoplayer programmieren (https://www.youtube.com/watch?v=9cCHq269OWs)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=bXMEAsBDlBg'> YOUTUBE 10 Best Places to Visit in Thailand (https://www.youtube.com/watch?v=bXMEAsBDlBg)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=2N7l6SSKeds'> YOUTUBE 10 Top Tourist Attractions in France - Travel Video</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=MlrzLYqIsE8'> YOUTUBE Lima Vacation Travel Guide | Expedia</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=GX4YDOfFFWQ'> ABBA-INSTRUMENTAL Selección de Cecil González (https://www.youtube.com/watch?v=GX4YDOfFFWQ)</span></li> </ul> </div> </div> <br> </fieldset> <br> <fieldset id="helpField" style="width:912px;padding:4px;color:white;border:6px #999999 inset;"> <legend style="font-size:16px;border:2px white solid;background:#666666"><b><i> HELP </i></b></legend> <div style="width:840px;height:460px;padding:20px;background:#CCFFCC;color:black;text-align:justify;overflow:auto"> <table width='100%' cellpadding="8" ><tr> <td style='width:400px; vertical-align:top;'> Creating a video player using HTML5 is not too difficult. But it only plays some video formats such as MP4, OGG, WEBM.<br> To watch more video formats, we must use the HTML5 video player plugin. I tried "Mediaelement.js" and found it great: in addition to the above mentioned formats, it can play YouTube, DaylyMotion, SoundCloud, Facebook, Vimeo, HLS, Dash, FLV and others. In the samples by "Mediaelement.js" I choose only two examples close to satisfy my needs. <br><br> However in the sample for playlist, the player only plays mp4, mp3, ogg, webm and youtube. <br> Meanwhile, the demo file can play a lot of formats but only play 1 video (when it is clicked) and stops. <br> </td> <td style="text-align:center;vertical-align:top;"><img src="happy-new-year-animated-Gifs-2.gif" width='450' height='300'></td> </tr></table> All the scripts are very short. Most just include only one function with multiple arguments to build the player. Nothing more.<br> Unlike when we created the video player using "youtube api", now no one on the network share programming with MediaElement.js. <br><br> So I looked at the source code of the "mediaelement-js.com" page, where all js files are online and have more functions. However, it is very difficult for me because I barely know anything about advanced javascript. I can only make a few changes to make the player work as I want. The lines of my code are awkward. Please correct it, make the code more reasonable. <br><br> - First of all, I make the video size smaller and place it into the center (using "margin:auto"). <br><br> - Secondly: I dropped style="max-width:100%;" because it changed the height of the video screen. <br><br> - Then I changed the playlist from the select-option form to ul-li form. So I can see not only one but several items. <br><br> - Because I have a banner at the top of the page and want to put the audio menu there so I have to separate the items of <ul id = "play-list2"> into 2 uls: <br> <li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> HAPPY NEW YEAR - ABBA</span></li><br> => <li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> N0</span></li> inside <ul id="play-list2"><br> and<br> <li<span class="play-item" onclick="music(0)">HAPPY NEW YEAR - ABBA</span></li> inside <ul id="play-list0">. <br><br> - Finally, I modified the javascript code where needed and added some functions. <br><br> Originally the "player" variable was local, and I changed it to global.<br> I also use a global variable, which is "currentV" to remember the order number of the currently playing video. <br> <pre style="font-family:Arial; font-size:10pt; color:#6600CC; border:2px solid blue;width:600px;"> <ul id="play-list0" style="color:white;cursor:pointer;text-align:left"> <li><span class="play-item" onclick="music(0)">HAPPY NEW YEAR - ABBA</span></li> <li><span class="play-item" onclick="music(1)">La Comparsa</span></li> </ul> <script> var player; sourcesSelector = $('#play-list1, #play-list2'); sourcesTotal = sourcesSelector.length; for (var i = 0; i < sourcesTotal; i++) { sourcesSelector.eq(i).find('.play-item').on('click', function (e) { <span style="color:red">var media = e.target.closest('.media-container').querySelector('.mejs__container').id; player = mejs.players[media];</span> player.setSrc(e.target.title.replace('&', '&')); link = $(this); currentV = link.parent().index(); $('#play-list1 .play-item').removeClass('active'); $('#play-list2 .play-item').removeClass('active'); link.addClass('active'); player.load(); player.play(); }); $('#play-list0 .play-item').on('click', function(e){ link = $(this); $('#play-list0 .play-item').removeClass('active'); link.addClass('active'); }) currentV = 0; document.addEventListener('DOMContentLoaded', function() { var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length; for (var i = 0; i < total; i++) { <span style="color:red">new MediaElementPlayer(mediaElements[i], { pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/', shimScriptAccess: 'always',</span> success: function () { var target = document.body.querySelectorAll('.player'), targetTotal = target.length; for (var j = 0; j < targetTotal; j++) { target[j].style.visibility = 'visible'; } $('#div-list2').hide(); } }); } document.getElementById('player2').addEventListener('ended', function(e) { var tracks = $('#play-list2').find('li'); var len = tracks.length; currentV++; if(currentV == len){ currentV = 0; } $('#play-list0 .play-item').eq(currentV).click(); }); }); <span style="color:green">/* end of addEventListener('DOMContentLoaded' ... */</span> function music(num){ $('#play-list2 .play-item').eq(num).click(); } <span style="color:green">/* FROM: https://github.com/mediaelement/mediaelement - If you want to use Flash shims from a CDN, do the change related to pluginPath setting the CDN's URL, and also setting shimScriptAccess configuration as always. - By default, MediaElement has bundled native renderers, such as HLS, M(PEG)-DASH and FLV, as well as YouTube and Flash shims. If you want to use any other renderer, you MUST refer to the build/renderers folder and add as many as you want. Check demo/index.html for a better reference. - If your installation relies on the legacy player classes (i.e., mejs-player, mejs-container, etc.), you must set up the proper namespace. In 2.x, the default namespace is mejs- but now is mejs__. In order to set up a new namespace (or the legacy one), use the classPrefix configuration, and make sure you use the mediaelementplayer-legacy stylesheet provided in the /build/ folder. - In general, MediaElement.js supports IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ and Android 4.0+. It is strongly recommended to read the entire documentation and check the demo folder to get the most out of this package. */</span> </pre> <br> <b>There are 2 ways to try this page:</b> <br><br> <span style="color:blue">1- Copy the code below to create a file "index.html". </span><br> Very quickly, but the banner slideshow can not work because it lacks 8 image files. <br> You also have to replace my MP3 files with the MP3 files you have on your PC. <br><br> <span style="color:blue">2. Open the following web and download to your PC 1 zip file:</span> <br> <b style="color:green">http://www.mediafire.com/file/2na6f7ap67qg06k/my-media-player.zip</b> <br><br> You will have:<br> - File "index.html.<br> - All image files.<br> - 4 MP3 files for audio player. <br><br> </div> </fieldset> <br> To try this web page, open the following web and download to your PC 1 zip file (20.6 MB):<br> <b style="color:#0000CC">http://www.mediafire.com/file/2na6f7ap67qg06k/my-media-player.zip</b> <br><br> <div style="width:1000px;height:26px; background-color:#336633;color:white;padding-top:10px"> <b><i>Return to my blog (http://phanhung20.blogspot.com/)</i></b> <button onclick="window.location = 'http://phanhung20.blogspot.com';">OK</button> </div> </div> <!-- center --> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelement-and-player.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/dailymotion.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/facebook.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/soundcloud.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/twitch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/vimeo.min.js"></script> <script src="https://buttons.github.io/buttons.js"></script> <script src="https://platform.twitter.com/widgets.js"></script> <script> var player; sourcesSelector = $('#play-list1, #play-list2'); sourcesTotal = sourcesSelector.length; for (var i = 0; i < sourcesTotal; i++) { sourcesSelector.eq(i).find('.play-item').on('click', function (e) { var media = e.target.closest('.media-container').querySelector('.mejs__container').id; player = mejs.players[media]; player.setSrc(e.target.title.replace('&', '&')); link = $(this); currentV = link.parent().index(); $('#play-list1 .play-item').removeClass('active'); $('#play-list2 .play-item').removeClass('active'); link.addClass('active'); player.load(); player.play(); }); $('#play-list0 .play-item').on('click', function(e){ link = $(this); $('#play-list0 .play-item').removeClass('active'); link.addClass('active'); }) // These media types cannot play at all on iOS, so disabling them if (mejs.Features.isiOS) { if (sourcesSelector[i].querySelector('option[value^="rtmp"]')) { sourcesSelector[i].querySelector('option[value^="rtmp"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$="webm"]')) { sourcesSelector[i].querySelector('option[value$="webm"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".mpd"]')) { sourcesSelector[i].querySelector('option[value$=".mpd"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".ogg"]')) { sourcesSelector[i].querySelector('option[value$=".ogg"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".flv"]')) { sourcesSelector[i].querySelector('option[value*=".flv"]').disabled = true; } } } // end of for(i=0 ...) currentV = 0; document.addEventListener('DOMContentLoaded', function() { var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length; for (var i = 0; i < total; i++) { new MediaElementPlayer(mediaElements[i], { pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/', shimScriptAccess: 'always', success: function () { var target = document.body.querySelectorAll('.player'), targetTotal = target.length; for (var j = 0; j < targetTotal; j++) { target[j].style.visibility = 'visible'; } $('#div-list2').hide(); } }); } document.getElementById('player1').addEventListener('ended', function(e) { var tracks = $('#play-list1').find('li'); var len = tracks.length; currentV++; if(currentV == len){ currentV = 0; } $('#play-list1 .play-item').eq(currentV).click(); }); document.getElementById('player2').addEventListener('ended', function(e) { var tracks = $('#play-list2').find('li'); var len = tracks.length; currentV++; if(currentV == len){ currentV = 0; } $('#play-list0 .play-item').eq(currentV).click(); }); }); // end of addEventListener('DOMContentLoaded' ... function music(num){ $('#play-list2 .play-item').eq(num).click(); } function scrollToElement(elem, add){ var top = $('#' + elem).position().top; $(window).scrollTop(top - add); } $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1500) .next() .fadeIn(1500) .end() .appendTo('#slideshow'); }, 6000); </script> </body></html> <!-- 477 lines -->
<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Using MediaElement.js</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css"> <style> body{ margin:0px; padding:0px; font-family:Arial; font-size:11pt; background-color:#99CC66; } ul[id^="play-list"] { padding:0; font-size:12px; list-style-type:none; } span.active{ color:#99FFFF;text-decoration:none; } ul[id^="play-list"] li { color:white; cursor:pointer; padding-left:15px; font-size:10pt; } .list{width:700px;height:150px;overflow:auto;background:#363;margin-top:5px;line-height:140%; color:white;margin-bottom:5px;} button{ background-color:#DDDDDD; cursor:pointer } .play-item:hover{ color:#5DB0E6 } .mejs-currenttime, .mejs-duration { color: black !important; } .mejs-controls .mejs-button button:focus { outline: none !important; } </style> </head> <body> <div align='center'> <br> <b style="font-size:14pt;">MODIFYING HTML5 MEDIAELEMENT PLAYER</b> </b><br> <div class="media-container"> <div class="player" style="width:300px;height:40px;margin:8px;"> <audio id="player1" preload="none" controls style="max-width: 100%"> <source src="HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3" type=""> </audio> </div> <div id ='div-list1' class="list" style="height:100px;"> <ul id="play-list1" style='text-align:left;'> <li><span class="play-item" title='HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3'> LOCAL MP3 HAPPY NEW YEAR - ABBA (downloaded from youtube.com - 4.8 MB)</span></li> <li><span class="play-item" title='La Comparsa - keyboard Tyros (chromatic) by Paul(1).mp3'> La Comparsa - keyboard Tyros</span></li> <li><span class="play-item" title='Moscow Nights - keyboard Tyros (chromatic) by Paul.mp3'> Moscow Nights</span></li> <li><span class="play-item" title='HOW CAN I TELL HER - PIANO COVER.mp3'> HOW CAN I TELL HER - PIANO COVER</span></li> </ul> </div> </div> <!-- class="media-container" --> <fieldset id="fsVideo1" style="width:912px;padding:4px;color:white;border:6px #999999 inset;"> <legend style="font-size:16px;border:2px white solid;background:#666666"><b><i> VIDEO 1 </i></b></legend> <div class="media-container" > <div class="player" style="width:900px;height:540px;margin:auto;"> <video id="player2" width="900" height="540" preload="metadata" style="" controls poster="images/big_buck_bunny.jpg" playsinline webkit-playsinline> <source src="https://www.youtube.com/watch?v=wVuOtaID1Rk" type=""> <track src="" srclang="en" label="English" kind="subtitles" type="text/vtt"> </video> </div> <div class="list" style="height:auto;padding:3px"> VIDEO: YOUTUBE, DAYLYMOTION, VIMEO, MP4, FLV, WEBM, HLS, DASH ... - CLICK TO WATCH<br> Please wait while the video is loading! Move the cursor in the video screen to see the control bar </div> <div class="list" style="border:3px solid #CCCCCC;"> <ul id="play-list2" style='text-align:left'> <li><span class="play-item" title='https://www.youtube.com/watch?v=wVuOtaID1Rk'> YOUTUBE London to Istanbul by train (https://www.youtube.com/watch?v=wVuOtaID1Rk)</span></li> <li><span class="play-item" title='https://player.vimeo.com/video/108018156?byline=0&portrait=0&badge=0'> VIMEO (https://player.vimeo.com/video/108018156?title=0&byline=0&portrait=0&badge=0)</span></li> <!-- Here I have to clear title=0 --> <li><span class="play-item" title='https://www.dailymotion.com/video/x11prnt'> DAYLYMOTION (https://www.dailymotion.com/video/x11prnt)</span></li> <li><span class="play-item" title='https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'> WEBM (https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm)</span></li> <li><span class="play-item" title='http://www.streambox.fr/playlists/test_001/stream.m3u8'> HLS (http://www.streambox.fr/playlists/test_001/stream.m3u8)</span></li> <li><span class="play-item" title='http://la2.indexcom.com/me/flv/guqin.flv'> FLV (http://la2.indexcom.com/me/flv/guqin.flv)</span></li> <li><span class="play-item" title='http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd'> M(PEG)-DASH (http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=9cCHq269OWs'> YOUTUBE Videoplayer programmieren (https://www.youtube.com/watch?v=9cCHq269OWs)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=bXMEAsBDlBg'> YOUTUBE 10 Best Places to Visit in Thailand (https://www.youtube.com/watch?v=bXMEAsBDlBg)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=2N7l6SSKeds'> YOUTUBE 10 Top Tourist Attractions in France - Travel Video</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=MlrzLYqIsE8'> YOUTUBE Lima Vacation Travel Guide | Expedia</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=GX4YDOfFFWQ'> ABBA-INSTRUMENTAL Selección de Cecil González (https://www.youtube.com/watch?v=GX4YDOfFFWQ)</span></li> </ul> </div> </div> <!-- class="media-container" --> </fieldset> <br> <fieldset id="fsVideo1" style="width:912px;padding:4px;color:white;border:6px #999999 inset;"> <legend style="font-size:16px;border:2px white solid;background:#666666"><b><i> VIDEO 2 </i></b></legend> <div class="media-container" > <div class="player" style="width:900px;height:540px;margin:auto;"> <video id="player3" width="900" height="540" preload="metadata" style="" controls poster="images/big_buck_bunny.jpg" playsinline webkit-playsinline> <source src="https://www.youtube.com/watch?v=9_XLqLFa6IA" type=""> <track src="" srclang="en" label="English" kind="subtitles" type="text/vtt"> </video> </div> <div class="list" style="height:auto;padding:3px"> VIDEO: YOUTUBE, DAYLYMOTION, VIMEO, MP4, FLV, WEBM, HLS, DASH ... - CLICK TO WATCH<br> Please wait while the video is loading! Move the cursor in the video screen to see the control bar </div> <div class="list" style="border:3px solid #CCCCCC;"> <ul id="play-list3" style='text-align:left'> <li><span class="play-item" title='https://www.youtube.com/watch?v=9_XLqLFa6IA'> YOUTUBE Green green grass of home (https://www.youtube.com/watch?v=9_XLqLFa6IA)</span></li> <li><span class="play-item" title='http://www.dailymotion.com/video/xrgu1d'> DAYLYMOTION (http://www.dailymotion.com/video/xrgu1d)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=otXUHgHKUj0'> YOUTUBE Blue Bayou-Roy Orbison (https://www.youtube.com/watch?v=otXUHgHKUj0)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=VCN8HGdYmLM&list=RDVCN8HGdYmLM'> YOUTUBE Như Quỳnh & Trường Vũ (https://www.youtube.com/watch?v=VCN8HGdYmLM&list=RDVCN8HGdYmLM)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=Hpe0gc_krgs'> YOUTUBE Mưa Đêm Ngoại Ô - Đào Anh Thư (https://www.youtube.com/watch?v=Hpe0gc_krgs)</span></li> <li><span class="play-item" title='https://www.youtube.com/watch?v=6y-idSxvF2g'> YOUTUBE Liên Khúc Hòa Tấu Guitar Không Lời (https://www.youtube.com/watch?v=6y-idSxvF2g)</span></li> </ul> </div> </div> <!-- class="media-container" --> </fieldset> <br> To try this web page, open the following web and download to your PC 1 zip file (20.6 MB):<br> <b style="color:#0000CC">http://www.mediafire.com/file/2na6f7ap67qg06k/my-media-player.zip</b> <br><br> <div style="width:932px;height:26px; background-color:#336633;color:white;padding-top:10px"> <b><i>Return to my blog (http://phanhung20.blogspot.com/)</i></b> <button onclick="window.location = 'http://phanhung20.blogspot.com';">OK</button> </div> </div> <!-- center --> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelement-and-player.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/dailymotion.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/facebook.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/soundcloud.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/twitch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/vimeo.min.js"></script> <script src="https://buttons.github.io/buttons.js"></script> <script src="https://platform.twitter.com/widgets.js"></script> <script> var player; sourcesSelector = $('#play-list1, #play-list2, #play-list3'); sourcesTotal = sourcesSelector.length; for (var i = 0; i < sourcesTotal; i++) { sourcesSelector.eq(i).find('.play-item').on('click', function (e) { var media = e.target.closest('.media-container').querySelector('.mejs__container').id; player = mejs.players[media]; player.setSrc(e.target.title.replace('&', '&')); link = $(this); currentV = link.parent().index(); $('#play-list1 .play-item').removeClass('active'); $('#play-list2 .play-item').removeClass('active'); $('#play-list3 .play-item').removeClass('active'); link.addClass('active'); player.load(); player.play(); }); // These media types cannot play at all on iOS, so disabling them if (mejs.Features.isiOS) { if (sourcesSelector[i].querySelector('option[value^="rtmp"]')) { sourcesSelector[i].querySelector('option[value^="rtmp"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$="webm"]')) { sourcesSelector[i].querySelector('option[value$="webm"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".mpd"]')) { sourcesSelector[i].querySelector('option[value$=".mpd"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".ogg"]')) { sourcesSelector[i].querySelector('option[value$=".ogg"]').disabled = true; } if (sourcesSelector[i].querySelector('option[value$=".flv"]')) { sourcesSelector[i].querySelector('option[value*=".flv"]').disabled = true; } } } // end of for(i=0 ...) currentV = 0; document.addEventListener('DOMContentLoaded', function() { var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length; for (var i = 0; i < total; i++) { new MediaElementPlayer(mediaElements[i], { pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/', shimScriptAccess: 'always', success: function () { var target = document.body.querySelectorAll('.player'), targetTotal = target.length; for (var j = 0; j < targetTotal; j++) { target[j].style.visibility = 'visible'; } } }); } $('#player1, #player2, #player3' ).each(function() { $(this).on('ended', function(e) { var tracks = $(this).closest('.media-container').find('.play-item'); var len = tracks.length; currentV++; if(currentV == len){ currentV = 0; } tracks.eq(currentV).click(); }); }); }); // end of addEventListener('DOMContentLoaded' ... </script> </body></html> <!-- 247 lines -->
