Video Player with Extra Server

Video Player - এ কেনো Extra Server রাখতে হয়

আমরা যারা ওয়েবসাইটে Video Upload করি তাদের জন্য এটি খুবই গুরুত্বপূর্ণ। কারন শুধুমাত্র একটি সার্ভারে Video দিলে যদি কোনো কারনে সার্ভারটি কাজ না করে। যেমন সার্ভারের সমস্যা বা ব্রাউজারের সমস্যার জন্য Video Play না হলে Visitor আমাদের ভিডিওটি Miss করবে। এবং আমাদের ওয়েবসাইটের উপর আস্থা হারিয়ে ফেলবে। ফলে আমাদের Website Google Rank এ প্রথমে আসলেও Visitor আর Visit করবে না। তাই আমরা একাধিক Server ব্যাবহার করতে পারি, যাতে করে কোনো একটি সার্ভারে সমস্যা হলে Visitor খুব সহজে অন্য একটি সার্ভারের মাধ্যমে ভিডিওটি Play করতে পারে।

Source Code

/* VIDEO PLAYER CONTAINER */
	.vid-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;max-width: 100%; } 
    .vid-container video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:none;}
    .vid-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* VIDEOS PLAYLIST */
    .play-list{position: relative;padding-bottom: 15%;height: 0;max-width: 100%;overflow: hidden;}
    #vid-list {position: absolute;height: 100%;width: 100%;margin:0;padding:0;background: #222;overflow: hidden;display: flex;justify-content: space-around;}
    #vid-list li {position: relative;list-style: none;width: 49%;background: #222;}
    #vid-list li:hover {background: #666;}
    #vid-list li a {text-decoration: none;background: #448aff;font-size: 20px;color: #fff;font-weight: bold;width: 80%;text-align: center;padding: 5%;margin: 0;position: absolute;top: 50%;left: 50%; -ms-transform: translate( -50%, -50%); transform: translate(-50%, -50%);}
    #vid-list .active a {background: red;}
    @media(max-width: 500px){
    .play-list{padding-bottom: 22%;}
    }
	</style>

<div class="vid-container">
      	  <video id="videoplaylist" preload="auto" tabindex="0" controls="" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfI5ZZTrAkgWqNSnRw6nBseNuzqyKvZiL7BruNgPIN3nLq9dXdtsk46LErEKDBHfS-lIqcrIEfN4nt9XxXiOcqJVd9ctw2m4xClpEhuThHl1NSctUUYsOFf_9cuLgRw39rSLp7JhOW4Zb_3K2Olhfe0rOcKHKMBR5S7bO2tyXvHbZvc6pDHjDGodJSg/s1600/Favorite%20Multimedia%20Thumbnail.jpg">
  <source src="">
          </video>
          <iframe id="vid_frame" src="https://favoritetvplayer.blogspot.com/?id=1GXrEIDlIOeg7cdfikh-6Q0go8PO2hoJ-" frameborder="0" allowfullscreen="allowfullscreen" scrolling="no"></iframe>
      </div>

<div class="play-list">
            <ul id="vid-list">
              <li><a class="play embed" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://sbchill.com/e/iuqegl66tu8a.html'; embed()">Server-1</a></li>
              
              <li><a class="play video" href="https://ucdn.v-s.mobi/yYQvQBlbVhlaHDXWZA/360p.mp4">Server-2</a></li>
            </ul>
    </div>
</div>

<center>
<a class="download" onclick = window.open('https://drive.google.com/file/d/1GXrEIDlIOeg7cdfikh-6Q0go8PO2hoJ-/view')>Download</a>
</center>

<script>
	init();

function run(song, videoplaylist, link){
			var parent = link.parentElement;

//quitar el active de todos los elementos de la lista
		var items = parent.parentElement.getElementsByTagName('li');
        for(var item in items) {
		if(items[item].classList)
        items[item].classList.remove("active");
        }
        
        //agregar active a este elemento
        parent.classList.add("active");
        
        //tocar la cancion
        videoplaylist.src = song;
        videoplaylist.load();
        videoplaylist.play();
}
  
	var video = document.querySelectorAll(".video");
	for (let i = 0; i < video.length; i++) {
	video[i].onclick = function() {
		document.querySelector("video").style.display = "block";
		document.querySelector("iframe").style.display="none";
		}
		}
		function embed() {
		document.querySelector("video").style.display="none";
		document.querySelector("iframe").style.display="block";
		}
</script>