Demo Multipel HTML Video With JavaScript

by Adi Jaya

HTML

<p>
    <button id="stopAllVideo" disabled>STOP ALL VIDEO</button>
</p>


<div id="main"></div>

CSS

#main {
    padding: 10px;
}

.video_container {
    padding: 10px;
    position: relative;
}

.video_container.active {
    box-shadow: inset 0 0 20px 4px black;
    animation: playing 2s cubic-bezier(0, 0, 1, 0.12) infinite;
}

.video {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: 4px;
}


@media (min-width:600px){
	#main {
		display: grid;
		grid-template-columns: auto auto;
	}
}

@media (min-width:800px){
	#main {
		grid-template-columns: auto auto auto;
	}
}

@keyframes playing {
	0% {
	box-shadow: inset 0 0 20px 4px black;
	}
	50% {
		box-shadow: inset 0 0 20px 4px blue;
	}
	100% {
		box-shadow: inset 0 0 20px 4px red;
	}
}

JavaScript

function createVideo( container, arr ){
  	var create = function( tag, cls ){
      	var _el = document.createElement( tag );
      			_el.className = cls;
      	return _el;
    };
  	
    for( var i = 0; i < arr.length; i++ ){
      	var wrap = create( "div", "video_container" );
      	var video = create( "video", "video" );
      		video.src = arr[i].url;
					video.controls = false;
					wrap.appendChild( video  );
					container.appendChild( wrap  );
    }
}

/*
	** URL VIDEO BY https://archive.org
  ** Only for demo
	*/
var dataVideo = [
  	{
      	artist : "Steve Vai",
    		title: "All About Eve",
      	url : "https://ia801202.us.archive.org/28/items/Steve_Vai_All_About_Eve/Steve%20Vai_All%20About%20Eve.mp4"
    }, {
      	artist : "Steve Vai",
    		title: "Now We Run",
      	url : "https://ia801207.us.archive.org/19/items/Steve_Vai_Now_We_Run/Steve%20Vai_Now%20We%20Run.mp4"
    }, {
      	artist : "Joe Satriani",
    		title: "I Just Wanna Rock",
      	url : "https://ia801207.us.archive.org/7/items/Joe_Satriani_I_Just_Wanna_Rock/Joe%20Satriani_I%20Just%20Wanna%20Rock.mp4"
    }, {
      	artist : "Joe Satriani",
    		title: "Shapeshifting (2020)",
      	url : "https://ia801004.us.archive.org/14/items/acidplanet-audio-01083390/01083390.mp4"
    }
];

createVideo( document.getElementById( "main" ), dataVideo );


function stopAllVideo(){
	var elVideo = document.querySelectorAll( ".video" );
	var elContainer= document.querySelectorAll( ".video_container" );
	for( var i = 0; i < elVideo.length; i++ ){
		elVideo[i].pause();
		elVideo[i].currentTime = 0;
	}
	for( var i = 0; i < elContainer.length; i++ ){
		elContainer[i].classList.remove( "active" );
	}
	document.querySelector( "#stopAllVideo" ).disabled = true;
}

//event click

function initClikVideo(){
	var videoC =  document.querySelectorAll( ".video_container" );
	for( var i = 0; i < videoC.length; i++ ){
		videoC[i].onclick = function(){
			var _video = this.querySelectorAll( ".video"...