Video Player With Playlish HTML, CSS and Java Script Code

কেনো Playlish সহ Video Player প্রয়োজন

আপনার একটি Multimedia Website আছে, কিন্ত Video সাজিয়ে রাখতে পারছেন না। যেমন গানের জন্য Playlist বানাতে এবং Web Series এর জন্য Season Ways Episode রাখতে পারছেন না। Wordpress এ Plugin ব্যাবহার করে Playlist তৈরি করা যায় কিন্তু Blogger এ তো Plugin ব্যাবহার করা যায় না। তবে নিচের কোডটি ব্যাবহার করে Blogger এবং Wordpress ওয়েবসাইটে গানের Playlist বানাতে এবং Web Series এর জন্য Season Ways Episode রাখতে পারবেন

বিশেষ সুবিধা

Responsive
Embed source and Video source are working

Source Code

<ul id="playlist">
        <li class="header-title">Shopner Thikana</li>
  
        <li id="video-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ftZ6QoxtU7-7fiet72Sfh8Xqp2j7VN6VBfFMaTHphi_scUoSPkgcGZL0eCQyhb3an9XCCtMh6VQ3YGNejewnBW9SclqkzL5zIMWKeZLY6gcdxRxiObSBn0QPR39JowfqHTkHX0drUEOvQL_A8DgaZIKS_pUOeu4WVhWkpJKdnHi81p_8vgmn_aX7lA/s1600/Eaidin%20Seidin%20Kono%20Din.jpg"/>
          <a class="play" href="https://ucdn.v-s.mobi/yYQvQBlbVhlaHDXWZA/360p.mp4">Eaidin Seidin Kono Din | Sabina Yasmin | Andrew Kishor</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYQvQBlbVhlaHDXWZA/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="video-list" class="active">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauylzy-OpFUV8-uIfmWsRNS5Ys91xXipo_vgLwC15VAFDbJVve-4aA78GhhUYcN-Cys6Of7vx-liRfRncZqMxHNpQk0Mt6-0sjXapInWEvig05DQLpc2v8pVppH7WFmS777oeKpTFZgjswjugzJHsLNidqUjr1O8i7fhbl_ftptDzoFzH3yG73oSjEQ/s1600/Tumi%20Amar%20Jiboner%20Shuru.jpg"/>
          <a class="play" href="https://ucdn.v-s.mobi/yYQYXTJcaUdJCCvQZA/360p.mp4">Tumi Amar Jiboner Shuru | Salman Shah | Sonia</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYQYXTJcaUdJCCvQZA/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="video-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFp67uXN6WPaZh_OD98MhQrlQRNKyfgCLJKD2lIIOAETzLGNxJwi0Ei9FELAce2cehARATyBKNh8rTlmV7-erm8ReVjQ5aWs7Kug1n-pp_v16dMJCoa3h-PWCzG3ioTxs_yxNkuiKQ5eijq0RCoi-5Qco78eAn-gxcRDzBFNoFOHz-HTzwMi_ShTQgXg/s1600/O%20Sathire%20jeona.jpg"/>
          <a class="play" href="https://ucdn.v-s.mobi/yYQTbQN2d1ZTQjPMCQ/360p.mp4">O Sathire | ও সাথীরে যেওনা | Salman Shah | Shabnur</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYQTbQN2d1ZTQjPMCQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="embed-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOG7AtN441b7pyjgyI355MXByhL2VwfpInXjA_gPaTJa-yAnRg6betXIMUU_Syj2AMAckGKNDtf-WFlGAzLVigdmOScMQMkM38lCEvndE6ymTKa1bS5Y-yIfxwCwcGV2kuhjxuThh4ya_XytMSvW79bXOzd39RnFnz0INxY-4KK1Gf_T_z7XRh36djQ/s1600/Neel%20Sagor%20Par%20Hoye.jpg"/>
          <a class="play" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://playhydrax.com/?v=my_rElZ8J'; embed()">Server-1</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYRdQxhbCHpJNyXoBQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="embed-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOG7AtN441b7pyjgyI355MXByhL2VwfpInXjA_gPaTJa-yAnRg6betXIMUU_Syj2AMAckGKNDtf-WFlGAzLVigdmOScMQMkM38lCEvndE6ymTKa1bS5Y-yIfxwCwcGV2kuhjxuThh4ya_XytMSvW79bXOzd39RnFnz0INxY-4KK1Gf_T_z7XRh36djQ/s1600/Neel%20Sagor%20Par%20Hoye.jpg"/>
          <a class="play" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://playhydrax.com/?v=my_rElZ8J'; embed()">Server-1</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYRdQxhbCHpJNyXoBQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="video-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFp67uXN6WPaZh_OD98MhQrlQRNKyfgCLJKD2lIIOAETzLGNxJwi0Ei9FELAce2cehARATyBKNh8rTlmV7-erm8ReVjQ5aWs7Kug1n-pp_v16dMJCoa3h-PWCzG3ioTxs_yxNkuiKQ5eijq0RCoi-5Qco78eAn-gxcRDzBFNoFOHz-HTzwMi_ShTQgXg/s1600/O%20Sathire%20jeona.jpg"/>
          <a class="play" href="https://ucdn.v-s.mobi/yYQTbQN2d1ZTQjPMCQ/360p.mp4">O Sathire | ও সাথীরে যেওনা | Salman Shah | Shabnur</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYQTbQN2d1ZTQjPMCQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="embed-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOG7AtN441b7pyjgyI355MXByhL2VwfpInXjA_gPaTJa-yAnRg6betXIMUU_Syj2AMAckGKNDtf-WFlGAzLVigdmOScMQMkM38lCEvndE6ymTKa1bS5Y-yIfxwCwcGV2kuhjxuThh4ya_XytMSvW79bXOzd39RnFnz0INxY-4KK1Gf_T_z7XRh36djQ/s1600/Neel%20Sagor%20Par%20Hoye.jpg"/>
          <a class="play" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://playhydrax.com/?v=my_rElZ8J'; embed()">Server-1</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYRdQxhbCHpJNyXoBQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
  
        <li id="embed-list">
          <img class="thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOG7AtN441b7pyjgyI355MXByhL2VwfpInXjA_gPaTJa-yAnRg6betXIMUU_Syj2AMAckGKNDtf-WFlGAzLVigdmOScMQMkM38lCEvndE6ymTKa1bS5Y-yIfxwCwcGV2kuhjxuThh4ya_XytMSvW79bXOzd39RnFnz0INxY-4KK1Gf_T_z7XRh36djQ/s1600/Neel%20Sagor%20Par%20Hoye.jpg"/>
          <a class="play" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://playhydrax.com/?v=my_rElZ8J'; embed()">Server-1</a>
          <button onclick = window.open("https://ucdn.v-s.mobi/yYRdQxhbCHpJNyXoBQ/360p.mp4")><i class="fa fa-download"></i></button>
        </li>
    </ul>
  </div>

<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();
}
  
    function embed() {
      document.querySelector("iframe").style.display="block";
      document.querySelector("video").style.display="none";
    }
  var video = document.querySelectorAll("#video-list .play");
  for (let i = 0; i < video.length; i++) {
    video[i].onclick = function() {
      document.querySelector("iframe").style.display="none";
      document.querySelector("video").style.display="block";
    }
  }
</script>