JSFiddle - React, Tailwind, and code Playground

by trixta

HTML

<div class="mediaplayer">
        <video controls preload="none">
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
            <p>You need a modern Browser or install the Flash Plugin or simply download the video (<a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v">mp4</a>, <a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm">webm</a>)</p>
        </video>
        <div class="mediacontrols">
            <input type="range" value="0" step="any" class="seekbar" disabled="" />
        </div>
    </div>

CSS

.mediaplayer {
				width: 480px;
			}

            .mediaplayer video {
                width: 100%;
                height: 240px;
            }

JavaScript

(function(){
            //simple feature test
            if(!document.createElement('video').canPlayType){
                return;
            }


            //the mediaplayer is the wrapper for all controls
            function createPlayer(mediaplayer){
                var video = mediaplayer.querySelector('video');
                var seekBar = mediaplayer.querySelector('.seekbar');

                if(seekBar){
                    createSeekBar(video, seekBar);
                }
            }

            function createSeekBar(video, seekBar){
                var duration, videoWasPaused;
                var blockSeek = false;

                function enableDisableSeekBar(){
                    duration = video.duration;
                    if(duration && !isNaN(duration)){
                        seekBar.max = duration;
                        seekBar.disabled = false;
                    } else {
                        seekBar.disabled = true;
                    }
                }

                function onSeek(){
                    if(!blockSeek){
                        blockSeek = true;
                        videoWasPaused = video.paused;
                        video.pause();
                    }
                    video.currentTime = seekBar.value;
                }

                function onSeekRelease(){
                    if(!videoWasPaused){
                        video.play();
                    }
                    blockSeek = false;
                }

                function onTimeupdate(){
                    if(!blockSeek){
                        seekBar.value = video.currentTime;
                    }
                }

                //or durationchange
                video.addEventListener('loadedmetadata', enableDisableSeekBar, false);
                video.addEventListener('emptied', enableDisableSeekBar, false);
                video.addEventListener('timeupdate', onTimeupdate, false);

               ...