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

<div class="main-playlist"> <iframe id="vid_frame" src="https://awsindstream.com/pb/dHQxMDAyODE5Ni0xNjYwNDU5MzI3ODgz?tr=5" frameborder="0" allowfullscreen="allowfullscreen" scrolling="no"></iframe> <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="https://ucdn.v-s.mobi/yYQYXTJcaUdJCCvQZA/360p.mp4"> </video> <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> <style> .main-playlist *{padding:0;margin:0;} .main-playlist {position:relative;width:100%;height:400px;background:#111;display:flex;justify-content:space-between;} .main-playlist iframe {position:relative;height:100%;width:65%;background:#111;display:none;} .main-playlist video {position:relative;height:100%;width:65%;background:#111;} .main-playlist #playlist {position:relative;height:100%;width:35%;padding:0;margin:0;overflow-y:scroll;scrollbar-color:#448AFF #333;scrollbar-width:thin;} .main-playlist #playlist::-webkit-scrollbar {width: 5px;background-color: #8A8A8A;border: 1px solid #AFACAC;} .main-playlist #playlist::-webkit-scrollbar-thumb {background-color: #448AFF;border-radius: 5px;} .main-playlist #playlist::-webkit-scrollbar-thumb:hover{background-color:#444;} .main-playlist #playlist::-webkit-scrollbar-thumb:active{background-color:#ccc;} .main-playlist #playlist .header-title{font-size:20px;color:#fff;font-weight:bold;text-align:center;padding:5px;background:#1877f2;margin:5px;} .main-playlist #playlist #video-list, .main-playlist #playlist #embed-list {position:relative;height:62px;margin:5px;background:#448AFF;display:flex;justify-content:space-between;} .main-playlist #playlist #video-list .thumb, .main-playlist #playlist #embed-list .thumb {height:100%;width:80px;} .main-playlist #playlist #video-list .play, .main-playlist #playlist #embed-list .play {width:60%;border-radius:7px;color:#fff;background:#111;padding:4px 5px;margin:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .main-playlist #playlist #video-list .play:hover, .main-playlist #playlist #embed-list .play:hover {background:#777;} .main-playlist #playlist .active#video-list .play, .main-playlist #playlist .active#embed-list .play {background:#fff;color:#111;font-weight:bold;} .main-playlist #playlist #video-list button, .main-playlist #playlist #embed-list button {font-size:20px;cursor:pointer;color:#fff;background:none;border:none;margin:8px 5px 2px 0;} .main-playlist #playlist #video-list button:hover, .main-playlist #playlist #embed-list button:hover {color:#333;} @media(max-width:500px) { .main-playlist {height:400px;display:flex;flex-direction: column;} .main-playlist iframe {height:45%;width:100%;} .main-playlist video {height:45%;width:100%;} .main-playlist #playlist {height:55%;width:100%;} } </style> <script> init(); function init(){ var videoplaylist = document.getElementById('videoplaylist'); var playlist = document.getElementById('playlist'); var tracks = playlist.getElementsByClassName('play'); videoplaylist.volume = 1; videoplaylist.play(); for(var track in tracks) { var link = tracks[track]; if(typeof link === "function" || typeof link === "number") continue; link.addEventListener('click', function(e) { e.preventDefault(); var song = this.getAttribute('href'); run(song, videoplaylist, this); }); } videoplaylist.addEventListener('ended',function(e) { for(var track in tracks) { var link = tracks[track]; var nextTrack = parseInt(track) + 1; if(typeof link === "function" || typeof link === "number") continue; if(!this.src) this.src = tracks[0]; if(track == (tracks.length - 1)) nextTrack = 0; console.log(nextTrack); if(link.getAttribute('href') === this.src) { var nextLink = tracks[nextTrack]; run(nextLink.getAttribute('href'), videoplaylist, nextLink); break; } } }); } 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>

Preview

• Shopner Thikana
• Eaidin Seidin Kono Din | Sabina Yasmin | Andrew Kishor
• Tumi Amar Jiboner Shuru | Salman Shah | Sonia
• O Sathire | ও সাথীরে যেওনা | Salman Shah | Shabnur
• Server-1
• Server-1
• O Sathire | ও সাথীরে যেওনা | Salman Shah | Shabnur
• Server-1
• Server-1