How to Insert MediaElements.js Html5 Video player in Simple Drive Video Player

on

 



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('&amp;', '&'));
                        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

Post a Comment