បញ្ជីចាក់វីដេអូ - Video Playlist

byMMO -Sunday, July 18, 2021

0

សួស្ដី! អ្នកទាំងអស់គ្នាជាទីគោរពរាប់អាន ថ្ងៃនេះខ្ញុំសូមបង្ហាញគន្លឹះក្នុងការដាក់បញ្ជីចាក់វីដេអូដែលមានលក្ខណៈជារឿងភាគ ឬ រឿងហូលីវូដ ហើយអ្នកអាច Embed Video ពីគេហៈទំព័រផ្សេងៗដូចជា៖ Facebook, YouTube, Google Drive, Vimeo, Dailymotion ឬ Ok.ru... ជាដើម។

១.ចូលទៅកាន់ Theme រួចយកពាក្យ Edit HTML

២.ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head>

<link href='https://fonts.googleapis.com/css2?family=Nokora:wght@400;700&amp;display=swap' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&amp;display=swap' rel='stylesheet'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>

៣.ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
function initPlaylist() {
    const videoIframe = document.querySelector('#iframe-embed');
    const videoItems = document.querySelectorAll('.vid-item');
    videoIframe.src = window.atob(videoItems[0].getAttribute('data-embed'));
    for (var i = 0; i < videoItems.length; i++) {
        videoItems[i].addEventListener("click", function (event) {
            videoIframe.src = window.atob(event.target.getAttribute('data-embed'));
            $(this).addClass('selected').siblings().removeClass('selected');
        });
        $(videoItems).first().addClass('selected');
    }
};
document.addEventListener('DOMContentLoaded', function () {
    initPlaylist();
});
//]]>
</script>

៤.ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </head> ដោយជ្រើសរើស Style Playlist ណាមួយដែលអ្នកពេញចិត្ត

* CSS Drama Playlist (1)

<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgba(0,0,0,1);border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17)}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:133px;overflow:auto;border-top:2px solid rgba(155,155,155,0.15)}
.playlist-wrap::-webkit-scrollbar{width:10px}
.playlist-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:10px}
.playlist-wrap::-webkit-scrollbar-thumb{background:#673ab7;border-radius:10px}
.video-list{counter-reset:episode-number;position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{position:relative;display:flex;flex-direction:column;min-height:40px;justify-content:center;align-items:center;font-family:'Poppins','Nokora',sans-serif;font-size:17px;font-weight:900;font-style:italic;background:#673ab720;color:#673ab7;text-decoration:none;cursor:pointer;padding:0 5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border:2px solid #673ab7;transition:background .17s}
.video-list a.vid-item:before{content:counter(episode-number);counter-increment:episode-number}
.video-list a.vid-item:hover{background:#673ab7;border:2px solid #ffffff;color:#ffffff}
.video-list a.vid-item.selected{background:#673ab7;border:2px solid #ffffff;color:#ffffff}
.video-list a.vid-item.selected:before{animation:horizontal 1.3s ease infinite}
@-webkit-keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:repeat(3,1fr);grid-gap:10px;padding:10px}
}
</style>

* CSS Drama Playlist (2)

<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgba(0,0,0,1);border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17)}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:133px;overflow:auto;border-top:2px solid rgba(155,155,155,0.15)}
.playlist-wrap::-webkit-scrollbar{width:10px}
.playlist-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:10px}
.playlist-wrap::-webkit-scrollbar-thumb{background:linear-gradient(135deg, #673ab7 0%,#3f51b5 100%);border-radius:10px}
.video-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{background:linear-gradient(135deg, #673ab7 0%,#3f51b5 100%);font-family:'Poppins','Nokora',sans-serif;font-weight:400;font-size:15px;color:#ffffff;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer;overflow:hidden;padding:10px 15px 10px 15px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border-radius:40px;transition:opacity .17s ease}
.video-list a.vid-item:before{content:"\f4ba";font-family:"Font Awesome 5 Free";font-weight:900;display:inline-block;margin:0 5px 0 0}
.video-list a.vid-item:hover{opacity:.9}
.video-list a.vid-item.selected{background:#4caf50}
.video-list a.vid-item.selected:before{animation:horizontal 1.3s ease infinite}
@-webkit-keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:1fr;grid-gap:10px;padding:10px}
.video-list a.vid-item{border-radius:0}
}
</style>

* CSS Hollywood Playlist (3)

<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgb(0 0 0 / 8%);border-radius:5px}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:auto;border-top:1px solid rgba(155,155,155,0.15)}
.video-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{font-family:'Poppins','Nokora',sans-serif;font-weight:400;font-size:15px;color:#212121;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer;overflow:hidden;padding:10px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border-radius:3px;transition:all .17s ease}
.video-list a.vid-item:before{content:"\f0a0";font-family:"Font Awesome 5 Free";font-weight:400;color:#ff5722;display:inline-block;margin:0 5px 0 0}
.video-list a.vid-item:hover{color:#ff5722}
.video-list a.vid-item.selected{background-color:#ff5722;color:#ffffff}
.video-list a.vid-item.selected:before{content:"\f863";font-weight:900;color:#ffffff;animation:spin 1.5s linear infinite}
@-webkit-keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:1fr;grid-gap:10px;padding:10px}
}
</style>

៥.ចុចពាក្យ Save Theme រួចចាកចេញពីផ្ទាំង Edit HTML។

៦.ចម្លងកូដខាងក្រោមដាក់ចូលទៅកាន់ Blog Post ដោយប្ដូរទៅជា HTML View

* HTML Drama Playlist (1)

<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
      </div>
    </div>
  </div>
</div>

* HTML Drama Playlist (2)

<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed="">Episode 1 - ភាគទី ០១</a>
        <a class="vid-item" data-embed="">Episode 2 - ភាគទី ០២</a>
        <a class="vid-item" data-embed="">Episode 3 - ភាគទី ០៣</a>
        <a class="vid-item" data-embed="">Episode 4 - ភាគទី ០៤</a>
        <a class="vid-item" data-embed="">Episode 5 - ភាគទី ០៥</a>
        <a class="vid-item" data-embed="">Episode 6 - ភាគទី ០៦</a>
        <a class="vid-item" data-embed="">Episode 7 - ភាគទី ០៧</a>
        <a class="vid-item" data-embed="">Episode 8 - ភាគទី ០៨</a>
        <a class="vid-item" data-embed="">Episode 9 - ភាគទី ០៩</a>
      </div>
    </div>
  </div>
</div>

* HTML Hollywood Playlist (3)

<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed="">Vidcloud_Hydrax - HD 720p</a>
        <a class="vid-item" data-embed="">DooStream - HD 1080p</a>
        <a class="vid-item" data-embed="">StreamTap - HD 720p</a>
      </div>
    </div>
  </div>
</div>

* ចំណាំ៖ សូមប្ដូរ Link Video ដែលអ្នកចង់ Embed

៧.ចុចពាក្យ Publish ជាការស្រេច។

ប្រភព ៖ www.rithisethtes.com

Tags: គន្លឺះប្លក់ហ្គ័រ

បញ្ជីចាក់វីដេអូ - Video Playlist

Post a Comment

Contact Form

បញ្ជី​ចាក់​វីដេអូ - Video Playlist

Post a Comment

Contact Form

បញ្ជីចាក់វីដេអូ - Video Playlist