បញ្ជីចាក់ទូរទស្សន៍ - Television Playlist

ត្រលប់​មក​ជួប​គ្នា​សារជាថ្មី​ម្ដងទៀត​ហើយ​បាទ ថ្ងៃនេះ​ខ្ញុំ​នឹង​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា​ពី​របៀប​ដាក់​បញ្ជី​ចាក់​ទូរទស្សន៍​សម្រាប់​ទស្សនា​នៅ​លើ​ប្លក់​ដែល​ប្រើប្រាស់​ក្បាលចាក់ Videojs Plugin។

១.ចូល​ទៅ​កាន់ 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'/>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"/>
<style type="text/css">
#my-player{position:relative;float:left;width:100%;overflow:hidden;border-radius:4px;border:1px solid rgba(155,155,155,0.15)}
.channel-wrap{position:relative;float:left;width:100%;height:136px;overflow:auto}
.channel-wrap::-webkit-scrollbar{width:10px}
.channel-wrap::-webkit-scrollbar-track{background:rgb(0 0 0 / 10%);border-radius:10px}
.channel-wrap::-webkit-scrollbar-thumb{background:#ff0054;border-radius:10px}
.channel-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.channel-list a.channel-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 15px 10px 15px;border:1px solid rgba(155,155,155,0.15);transition:all .17s ease}
.channel-list a.channel-item:before{content:"\f0da";font-family:"Font Awesome 5 Free";font-weight:900;color:#ff0054;margin:0 5px 0 0}
.channel-list a.channel-item:hover{color:#ff0054}
.channel-list a.channel-item.selected{color:#ff0054;border:1px solid #ff0054;border-left:4px solid #ff0054}
.channel-list a.channel-item.selected:before{content:"\f028"}
@media screen and (max-width: 680px){
.channel-list{grid-template-columns:1fr;grid-gap:10px;padding:10px}
}
</style>

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

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
<script src="https://unpkg.com/video.js/dist/video.min.js"/>
<script type='text/javascript'>
//<![CDATA[
const tvPlaylist = {
    $el: undefined,
    player: undefined,
    init: function () {
        var self = this;
        videojs("main-player", {
            languages: {
                en: {
                    "LIVE": "<i class='fas fa-circle' style='color:#ff0000'></i> អ្នកកំពុងមើលការផ្សាយផ្ទាល់",
                    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Error! ប៉ុស្តិ៍នេះមិនដំណើរការទេខណៈពេលនេះ!"
                }
            }
        }, function () {
            var $el = self.$el = $('.channel-list');
            self.player = this;
            self.bindEvents.call(self);
        });
    },
    bindEvents: function () {
        var self = this;
        this.$el.find('.channel-item').click(function (event) {
            var $this = $(this);
            self.switchChannel($this);
            event.preventDefault();
        });
    },
    switchChannel: function ($anchor) {
        player = this.player;
        player.src(window.atob($anchor.attr('data-file')));
        player.play();
        $anchor.addClass('selected').siblings().removeClass('selected');
    }
};
document.addEventListener('DOMContentLoaded', function () {
    tvPlaylist.init();
});
//]]>
</script>

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

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

<div id="my-player">
  <video-js id=main-player width=600 height=300 class="vjs-default-skin vjs-fluid vjs-big-play-centered" controls poster="https://1.bp.blogspot.com/-vLc7HdtK0Es/YO3aXcdG94I/AAAAAAAAGE4/djoRxBJcMKIlIBmt5XD8-3z2FakHObPDQCNcBGAsYHQ/s0/tv-poster.png">
    <source src="#" type="application/x-mpegURL">
  </video-js>
  <div class="channel-wrap">
    <div class="channel-list">
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL3R2a2VkZ2UvYnR2LnN0cmVhbS9jaHVua2xpc3QubTN1OA==">BTV Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL3R2a2VkZ2UvYmF5b25oZC5zdHJlYW0vY2h1bmtsaXN0Lm0zdTg=">Bayon Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL3R2a2VkZ2UvdHZraGQuc3RyZWFtL2NodW5rbGlzdC5tM3U4">TVK Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL3R2a2VkZ2UvdHZrMi5zdHJlYW0vY2h1bmtsaXN0Lm0zdTg=">TVK2 Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL2Z0YWVkZ2UwMC9raG1lcnR2MjAyMC5zdHJlYW0vY2h1bmtsaXN0Lm0zdTg=">KhmerTV Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlZnRhLm1hbGltYXJjZG4uY29tL2Z0YWVkZ2UwMC90ZWF0djIuc2RwL2NodW5rbGlzdC5tM3U4">TeaTV Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly90aGFpcGJzLWxpdmUuY2RuLmJ5dGVhcmsuY29tL2xpdmUvcGxheWxpc3RfMTA4MHAvaW5kZXgubTN1OA==">ThaiPBS Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9saXZlLnRoYWlyYXRoLmNvLnRoL3RydHYyL3BsYXlsaXN0Lm0zdTg=">Thairath Channel</a>
      <a class="channel-item" data-file="aHR0cHM6Ly9lZGdlNmEudjJoLWNkbi5jb20vUkVfSEQvc21pbDpUVkJfSERfQUJSLnNtaWwvcGxheWxpc3QubTN1OA==">TVB Channel</a>
    </div>
  </div>
</div>

* ចំណាំ៖ data-file គឺ​ជា តំណរភ្ជាប់ File Stream ដែល​មាន​កន្ទុយ Extension.m3u8 នៃ​ប៉ុស្តិ៍​ទូរទស្សន៍​អ្នក​អាច​ស្វែងរក​បន្ថែម​នៅ​លើ Google ហើយ File .m3u8 នោះ​ត្រូវ Convert ទៅ​ជា Base64 Format ជា​មុន​សិន 

* គេហទំព័រ​សម្រាប់​បម្លែង​ទៅ​ជា Base64៖ https://www.base64encode.org ៦.ចុច​ពាក្យ Publish ជា​ការ​ស្រេច។