Video Player
<!-- Add Css library -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">
<!-- Add a Simple Video Tag -->
<h2>Video Player</h2>
<div class="media-wrapper">
<video id="player1" width="750" height="421" controls preload="none">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
<!-- At Last add the script File -->
<script "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement.js"></script>
See Demo :- https://repl.it/@SH20RAJ/mediaelement#index.html
Now , How will Full Code Looks Like ....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaElements.JS | CodeXD-India</title>
<!-- library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">
</head>
<body>
<h2>Video Player</h2>
<div class="media-wrapper">
<video id="player1" width="750" height="421" controls preload="none">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
<script>
var
sourcesSelector = document.body.querySelectorAll('select'),
sourcesTotal = sourcesSelector.length
;
for (var i = 0; i < sourcesTotal; i++) {
sourcesSelector[i].addEventListener('change', function (e) {
var
media = e.target.closest('.media-container').querySelector('.mejs__container').id,
player = mejs.players[media]
;
player.setSrc(e.target.value.replace('&', '&'));
player.setPoster('');
player.load();
});
// 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;
}
}
}
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.16/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';
}
}
});
}
});
</script>
</body>
</html>
Comments