code-boxx/0-JS-VIDEO-PLAYLIST.MD

## 0-JS-VIDEO-PLAYLIST.MD

      
    Raw
  

              0-JS-VIDEO-PLAYLIST.MD
            
          
    JAVASCRIPT CUSTOM VIDEO PLAYER WITH PLAYLIST

https://code-boxx.com/html-video-player-with-playlist/
NOTES


No videos are provided, download your own.
Edit video.js, set the videos in let playlist = [...].

LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## video.css
/* (A) MATERIAL ICONS */
.material-icons {
  font-size: 28px;
  color: #fff;
}

/* (B) WRAPPER */
#vWrap {
  font-family: arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 600px;
  background: #484848;
}

/* (C) VIDEO */
#vVid {
  width: 100%;
}

/* (D) PLAY/PAUSE BUTTON */
#vPlay {
  padding: 10px;
  margin: 0;
  background: 0;
  border: 0;
  cursor: pointer;
}

/* (E) TIME */
#vCron {
  font-size: 14px;
  color: #cbcbcb;
  margin: 0 10px;
}

/* (F1) RANGE SLIDERS */
/* (F1) HIDE DEFAULT */
#vWrap input[type="range"] {
  box-sizing: border-box;
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: 0;
}
#vWrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
}

/* (F2) CUSTOM SLIDER TRACK */
#vWrap input[type=range]::-webkit-slider-runnable-track {
  background: #626262;
  border-radius: 10px;
}
#vWrap input[type=range]::-moz-range-track {
  background: #626262;
  border-radius: 10px;
}

/* (F3) CUSTOM SLIDER BUTTON */
#vWrap input[type=range]::-webkit-slider-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}
#vWrap input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}

/* (G) SEEK BAR */
#vSeek {
  width: 180px;
}

/* (H) VOLUME */
#vVolume {
  width: 100px;
}
#vVolIco {
  margin: 0 10px;
  cursor: pointer;
}

/* (I) PLAYLIST */
#vList {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  color: #7e7e7e;
  background: #323232;
}
.vRow {
  cursor: pointer;
  padding: 10px 0;
}
.vRow.now {
  color: #fea;
}

## video.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS Video Player</title>
    <!-- https://fonts.google.com/icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="video.css">
    <script defer src="video.js"></script>
  </head>
  <body>
    <div id="vWrap">
      <!-- (A) VIDEO TAG -->
      <video id="vVid"></video>

      <!-- (B) PLAY/PAUSE BUTTON -->
      <button id="vPlay" disabled><span id="vPlayIco" class="material-icons">
        play_arrow
      </span></button>

      <!-- (C) TIME -->
      <div id="vCron">
        <span id="vNow"></span> / <span id="vTime"></span>
      </div>

      <!-- (D) SEEK BAR -->
      <input id="vSeek" type="range" min="0" value="0" step="1" disabled>

      <!-- (E) VOLUME SLIDE -->
      <span id="vVolIco" class="material-icons">volume_up</span>
      <input id="vVolume" type="range" min="0" max="1" value="1" step="0.1" disabled>

      <!-- (F) PLAYLIST -->
      <div id="vList"></div>
    </div>
  </body>
</html>

## video.js
window.addEventListener("DOMContentLoaded", () => {
  // (A) PLAYER INIT
  // (A1) PLAYLIST - CHANGE TO YOUR OWN!
  let playlist = [
    {name: "Video A", src: "v1.mp4"},
    {name: "Video B", src: "v2.mp4"},
    {name: "Video C", src: "v3.mp4"}
  ];

  // (A2) VIDEO PLAYER & GET HTML CONTROLS
  const video = document.getElementById("vVid"),
        vPlay = document.getElementById("vPlay"),
        vPlayIco = document.getElementById("vPlayIco"),
        vNow = document.getElementById("vNow"),
        vTime = document.getElementById("vTime"),
        vSeek = document.getElementById("vSeek"),
        vVolume = document.getElementById("vVolume"),
        vVolIco = document.getElementById("vVolIco"),
        vList = document.getElementById("vList");

  // (A3) BUILD PLAYLIST
  for (let i in playlist) {
    let row = document.createElement("div");
    row.className = "vRow";
    row.innerHTML = playlist[i]["name"];
    row.addEventListener("click", () => vidPlay(i));
    playlist[i]["row"] = row;
    vList.appendChild(row);
  }

  // (B) PLAY MECHANISM
  // (B1) FLAGS
  var vidNow = 0, // current video
      vidStart = false, // auto start next video

  // (B2) PLAY SELECTED VIDEO
  vidPlay = (idx, nostart) => {
    vidNow = idx;
    vidStart = nostart ? false : true;
    video.src = encodeURI(playlist[idx]["src"]);
    for (let i in playlist) {
      if (i == idx) { playlist[i]["row"].classList.add("now"); }
      else { playlist[i]["row"].classList.remove("now"); }
    }
  };

  // (B3) AUTO START WHEN SUFFICIENTLY BUFFERED
  video.addEventListener("canplay", () => { if (vidStart) {
    video.play();
    vidStart = false;
  }});

  // (B4) AUTOPLAY NEXT VIDEO IN THE PLAYLIST
  video.addEventListener("ended", () => {
    vidNow++;
    if (vidNow >= playlist.length) { vidNow = 0; }
    vidPlay(vidNow);
  });

  // (B5) INIT SET FIRST VIDEO
  vidPlay(0, true);

  // (C) PLAY/PAUSE BUTTON
  // (C1) AUTO SET PLAY/PAUSE TEXT
  video.addEventListener("play", () => vPlayIco.innerHTML = "pause");
  video.addEventListener("pause", () => vPlayIco.innerHTML = "play_arrow");

  // (C2) CLICK TO PLAY/PAUSE
  vPlay.addEventListener("click", () => {
    if (video.paused) { video.play(); }
    else { video.pause(); }
  });

  // (D) TRACK PROGRESS
  // (D1) SUPPORT FUNCTION - FORMAT HH:MM:SS
  var timeString = secs => {
    // (D1-1) HOURS, MINUTES, SECONDS
    let ss = Math.floor(secs),
        hh = Math.floor(ss / 3600),
        mm = Math.floor((ss - (hh * 3600)) / 60);
    ss = ss - (hh * 3600) - (mm * 60);

    // (D1-2) RETURN FORMATTED TIME
    if (hh>0) { mm = mm<10 ? "0"+mm : mm; }
    ss = ss<10 ? "0"+ss : ss;
    return hh>0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}` ;
  };

  // (D2) INIT SET TRACK TIME
  video.addEventListener("loadedmetadata", () => {
    vNow.innerHTML = timeString(0);
    vTime.innerHTML = timeString(video.duration);
  });

  // (D3) UPDATE TIME ON PLAYING
  video.addEventListener("timeupdate", () => vNow.innerHTML = timeString(video.currentTime));

  // (E) SEEK BAR
  video.addEventListener("loadedmetadata", () => {
    // (E1) SET SEEK BAR MAX TIME
    vSeek.max = Math.floor(video.duration);

    // (E2) USER CHANGE SEEK BAR TIME
    var vSeeking = false; // user is now changing time
    vSeek.addEventListener("input", () => vSeeking = true); // prevents clash with (e3)
    vSeek.addEventListener("change", () => {
      video.currentTime = vSeek.value;
      if (!video.paused) { video.play(); }
      vSeeking = false;
    });

    // (E3) UPDATE SEEK BAR ON PLAYING
    video.addEventListener("timeupdate", () => {
      if (!vSeeking) { vSeek.value = Math.floor(video.currentTime); }
    });
  });

  // (F) VOLUME
  vVolIco.addEventListener("click", () => {
    video.volume = video.volume==0 ? 1 : 0 ;
    vVolume.value = video.volume;
    vVolIco.innerHTML = (vVolume.value==0 ? "volume_mute" : "volume_up");
  });
  vVolume.addEventListener("change", () => {
    video.volume = vVolume.value;
    vVolIco.innerHTML = (vVolume.value==0 ? "volume_mute" : "volume_up");
  });

  // (G) ENABLE/DISABLE CONTROLS
  video.addEventListener("canplay", () => {
    vPlay.disabled = false;
    vVolume.disabled = false;
    vSeek.disabled = false;
  });
  video.addEventListener("waiting", () => {
    vPlay.disabled = true;
    vVolume.disabled = true;
    vSeek.disabled = true;
  });
});
	/* (A) MATERIAL ICONS */
	.material-icons {
	font-size: 28px;
	color: #fff;
	}

	/* (B) WRAPPER */
	#vWrap {
	font-family: arial, sans-serif;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 600px;
	background: #484848;
	}

	/* (C) VIDEO */
	#vVid {
	width: 100%;
	}

	/* (D) PLAY/PAUSE BUTTON */
	#vPlay {
	padding: 10px;
	margin: 0;
	background: 0;
	border: 0;
	cursor: pointer;
	}

	/* (E) TIME */
	#vCron {
	font-size: 14px;
	color: #cbcbcb;
	margin: 0 10px;
	}

	/* (F1) RANGE SLIDERS */
	/* (F1) HIDE DEFAULT */
	#vWrap input[type="range"] {
	box-sizing: border-box;
	appearance: none;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	background: 0;
	}
	#vWrap input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	}

	/* (F2) CUSTOM SLIDER TRACK */
	#vWrap input[type=range]::-webkit-slider-runnable-track {
	background: #626262;
	border-radius: 10px;
	}
	#vWrap input[type=range]::-moz-range-track {
	background: #626262;
	border-radius: 10px;
	}

	/* (F3) CUSTOM SLIDER BUTTON */
	#vWrap input[type=range]::-webkit-slider-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	}
	#vWrap input[type=range]::-moz-range-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	}

	/* (G) SEEK BAR */
	#vSeek {
	width: 180px;
	}

	/* (H) VOLUME */
	#vVolume {
	width: 100px;
	}
	#vVolIco {
	margin: 0 10px;
	cursor: pointer;
	}

	/* (I) PLAYLIST */
	#vList {
	width: 100%;
	border-radius: 5px;
	padding: 10px;
	margin: 10px;
	color: #7e7e7e;
	background: #323232;
	}
	.vRow {
	cursor: pointer;
	padding: 10px 0;
	}
	.vRow.now {
	color: #fea;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>JS Video Player</title>
	<!-- https://fonts.google.com/icons -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="video.css">
	<script defer src="video.js"></script>
	</head>
	<body>
	<div id="vWrap">
	<!-- (A) VIDEO TAG -->
	<video id="vVid"></video>

	<!-- (B) PLAY/PAUSE BUTTON -->
	<button id="vPlay" disabled><span id="vPlayIco" class="material-icons">
	play_arrow
	</span></button>

	<!-- (C) TIME -->
	<div id="vCron">
	<span id="vNow"></span> / <span id="vTime"></span>
	</div>

	<!-- (D) SEEK BAR -->
	<input id="vSeek" type="range" min="0" value="0" step="1" disabled>

	<!-- (E) VOLUME SLIDE -->
	<span id="vVolIco" class="material-icons">volume_up</span>
	<input id="vVolume" type="range" min="0" max="1" value="1" step="0.1" disabled>

	<!-- (F) PLAYLIST -->
	<div id="vList"></div>
	</div>
	</body>
	</html>
	window.addEventListener("DOMContentLoaded", () => {
	// (A) PLAYER INIT
	// (A1) PLAYLIST - CHANGE TO YOUR OWN!
	let playlist = [
	{name: "Video A", src: "v1.mp4"},
	{name: "Video B", src: "v2.mp4"},
	{name: "Video C", src: "v3.mp4"}
	];

	// (A2) VIDEO PLAYER & GET HTML CONTROLS
	const video = document.getElementById("vVid"),
	vPlay = document.getElementById("vPlay"),
	vPlayIco = document.getElementById("vPlayIco"),
	vNow = document.getElementById("vNow"),
	vTime = document.getElementById("vTime"),
	vSeek = document.getElementById("vSeek"),
	vVolume = document.getElementById("vVolume"),
	vVolIco = document.getElementById("vVolIco"),
	vList = document.getElementById("vList");

	// (A3) BUILD PLAYLIST
	for (let i in playlist) {
	let row = document.createElement("div");
	row.className = "vRow";
	row.innerHTML = playlist[i]["name"];
	row.addEventListener("click", () => vidPlay(i));
	playlist[i]["row"] = row;
	vList.appendChild(row);
	}

	// (B) PLAY MECHANISM
	// (B1) FLAGS
	var vidNow = 0, // current video
	vidStart = false, // auto start next video

	// (B2) PLAY SELECTED VIDEO
	vidPlay = (idx, nostart) => {
	vidNow = idx;
	vidStart = nostart ? false : true;
	video.src = encodeURI(playlist[idx]["src"]);
	for (let i in playlist) {
	if (i == idx) { playlist[i]["row"].classList.add("now"); }
	else { playlist[i]["row"].classList.remove("now"); }
	}
	};

	// (B3) AUTO START WHEN SUFFICIENTLY BUFFERED
	video.addEventListener("canplay", () => { if (vidStart) {
	video.play();
	vidStart = false;
	}});

	// (B4) AUTOPLAY NEXT VIDEO IN THE PLAYLIST
	video.addEventListener("ended", () => {
	vidNow++;
	if (vidNow >= playlist.length) { vidNow = 0; }
	vidPlay(vidNow);
	});

	// (B5) INIT SET FIRST VIDEO
	vidPlay(0, true);

	// (C) PLAY/PAUSE BUTTON
	// (C1) AUTO SET PLAY/PAUSE TEXT
	video.addEventListener("play", () => vPlayIco.innerHTML = "pause");
	video.addEventListener("pause", () => vPlayIco.innerHTML = "play_arrow");

	// (C2) CLICK TO PLAY/PAUSE
	vPlay.addEventListener("click", () => {
	if (video.paused) { video.play(); }
	else { video.pause(); }
	});

	// (D) TRACK PROGRESS
	// (D1) SUPPORT FUNCTION - FORMAT HH:MM:SS
	var timeString = secs => {
	// (D1-1) HOURS, MINUTES, SECONDS
	let ss = Math.floor(secs),
	hh = Math.floor(ss / 3600),
	mm = Math.floor((ss - (hh * 3600)) / 60);
	ss = ss - (hh * 3600) - (mm * 60);

	// (D1-2) RETURN FORMATTED TIME
	if (hh>0) { mm = mm<10 ? "0"+mm : mm; }
	ss = ss<10 ? "0"+ss : ss;
	return hh>0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}` ;
	};

	// (D2) INIT SET TRACK TIME
	video.addEventListener("loadedmetadata", () => {
	vNow.innerHTML = timeString(0);
	vTime.innerHTML = timeString(video.duration);
	});

	// (D3) UPDATE TIME ON PLAYING
	video.addEventListener("timeupdate", () => vNow.innerHTML = timeString(video.currentTime));

	// (E) SEEK BAR
	video.addEventListener("loadedmetadata", () => {
	// (E1) SET SEEK BAR MAX TIME
	vSeek.max = Math.floor(video.duration);

	// (E2) USER CHANGE SEEK BAR TIME
	var vSeeking = false; // user is now changing time
	vSeek.addEventListener("input", () => vSeeking = true); // prevents clash with (e3)
	vSeek.addEventListener("change", () => {
	video.currentTime = vSeek.value;
	if (!video.paused) { video.play(); }
	vSeeking = false;
	});

	// (E3) UPDATE SEEK BAR ON PLAYING
	video.addEventListener("timeupdate", () => {
	if (!vSeeking) { vSeek.value = Math.floor(video.currentTime); }
	});
	});

	// (F) VOLUME
	vVolIco.addEventListener("click", () => {
	video.volume = video.volume==0 ? 1 : 0 ;
	vVolume.value = video.volume;
	vVolIco.innerHTML = (vVolume.value==0 ? "volume_mute" : "volume_up");
	});
	vVolume.addEventListener("change", () => {
	video.volume = vVolume.value;
	vVolIco.innerHTML = (vVolume.value==0 ? "volume_mute" : "volume_up");
	});

	// (G) ENABLE/DISABLE CONTROLS
	video.addEventListener("canplay", () => {
	vPlay.disabled = false;
	vVolume.disabled = false;
	vSeek.disabled = false;
	});
	video.addEventListener("waiting", () => {
	vPlay.disabled = true;
	vVolume.disabled = true;
	vSeek.disabled = true;
	});
	});