Khmer Web Library

ក្រៅពីតំរូវអោយប្រដាប់មើលវីដេអូរបស់ប្រព័ន្ធ YouTube ឬ Facebook លេងវីដេអូតែមួយរឿងដាច់ៗពីគ្នា យើងក៏អាចតំរូវអោយប្រដាប់មើលវីដេអូទាំងនោះ លេងវីដេអូម្តងមួយខ្សែជាប់គ្នាតែម្តងក៏បានដែរ។ ឧទារណ៍ ដូចជារឿងភាគជាដើម ដែលមានវីដេអូជាច្រើនភាគជាប់ៗរហូតដល់រាប់រយឯណោះក៏មានដែរ។

ដើម្បីសំរេចគោលបំណងនេះបាន យើងចាំបាច់ត្រូវបង្កើតកំរងវីដេអូមួយ (playlist) ដែលនៅក្នុងនោះអាចមានវីដេអូមានចំនួនប៉ុន្មានភាគក៏បានដែរ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖

<style>
/* កូដខាងក្រោមនេះ គឺជា css ចាំបាច់សំរាប់រចនា menu នៅខាងក្រោម
ដែលនៅក្នុងនោះមានពក្យថា «លេង» «សំរាក» និង «បើកសំលេង»។ */
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover{
  background-color: #111;
  cursor:pointer;
}
</style>

<script>
//បង្កើតឈ្មោះ «player» មួយទុកសំរាប់ភ្ជាប់ទៅនឹងវត្ថុដែលជាប្រដាប់មើលវីដេអូ
var player;
 
//ការបង្កើតកំរងវីដេអូមួយ ដែលនៅក្នុងនោះមានវីដេអូចំនួន ៥ រឿង
var playlist = [];
playlist[0] = '2270255849679574';
playlist[1] = '996743840714965';
playlist[2] = '2512912775405277';
playlist[3] = '1026328170892490';
playlist[4] = '2176928592637027';
 
//បង្កើតវត្ថុដែលជាលេខរៀងវីដេអូដើមគេនៅក្នុងកំរងវីដេអូ playlist
var index = 0;
 
/*បង្កើតតំណរ link ទៅកាន់វីដេអូដែលមានអត្តសញ្ញាណ
ជាធាតុមានលេខរៀង 0 នៅក្នុងកំរងវីដេ playlist ខាងលើ*/
var videoUrl = "https://www.facebook.com/video.php?v=" + playlist[index];
 
/* ទាញយកក្បួនខ្នាតចាំបាច់ពីប្រព័ន្ធ Facebook 
ទាក់ទងនឹងប្រដាប់មើលវីដេអូ */
window.fbAsyncInit = function() {
  FB.init({
    appId: '{your-app-id}',
    xfbml      : true,
    version    : 'v3.2'
  });
     
/* បង្កើតប្រដាប់មើលវីដេអូ Facebook មួយភ្ជាប់ទៅនឹងឈ្មោះ «player» នៅខាងលើ
សំរាប់ដាក់ក្នុងធាតុ div ដែលមានថ្នាក់ជា «fb-video» នៅខាងក្រោម។ */
  FB.Event.subscribe('xfbml.ready', function(msg) {
    if(msg.type === 'video'){
      player = msg.instance;
 
      //ភ្ជាប់ហេតុការណ៍ «startedPlaying» ទៅនឹងក្បួនមួយ
      player.subscribe('startedPlaying', function(e) {
        //ការធ្វើអោយផ្ទៃរបស់ browser ទៅជាខ្មៅ
        $('.main-outer').css("background-color","black");
      });       
 
      //ភ្ជាប់ហេតុការណ៍ «paused» ទៅនឹងក្បួនមួយទៀត
      player.subscribe('paused', function(e) {
        //ការធ្វើអោយផ្ទៃរបស់ browser ទៅជាសវិញ
        $('.main-outer').css("background-color","white");
      }); 
 
      //ភ្ជាប់ហេតុការណ៍ «finishedPlaying» ទៅនឹងក្បួនមួយទៀត
      player.subscribe('finishedPlaying', function(e) {
        //ការធ្វើអោយផ្ទៃរបស់ browser ទៅជាសវិញ
        $('.main-outer').css("background-color","white");
 
        /*បង្កើនតំលៃវត្ថុ index អោយធំជាងមុន 1 ដើម្បីអោយស្មើនឹង
        លេខរៀងវីដេអូបន្ទាប់មកទៀតនៅក្នុងកំរងវីដេអូ playlist */
        index++;
         
        /*បើសិនជាតំលៃលេខ index ជាងលេខរៀងវីដេអូចុងក្រោយគេ
        គឺតំរូវអោយវាមានតំលៃស្មើនឹងលេខរៀងវីដេអូខាងដើមគេវិញ*/
        if(index>playlist.length-1){
          index = 0;
        }
 
        /*បង្កើតតំណរ link ទៅកាន់វីដេអូដែលមានអត្តសញ្ញាណជាធាតុ
        មានលេខរៀងស្មើនឹងតំលៃរបស់ index នៅក្នុងកំរងវីដេ playlist ខាងលើ*/
        videoUrl = "https://www.facebook.com/video.php?v="+playlist[index];
 
        /*តំរូវអោយប្រដាប់មើលវិដេអូ Facebook លេងវីដអូ
        បន្ទាប់មកទៀតនៅក្នុងកំរងវីដេអូឈ្មោះ playlist */
        $(".fb-video").attr("data-href",videoUrl);
        $(".fb-video").attr("data-autoplay","true");
        FB.XFBML.parse();
 
      }); 
 
    }
  });
};
</script>
 
<!-- ទាញយកក្បួនខ្នាតចាំបាច់ពីប្រព័ន្ធ Facebook បន្ថែមទៀតទាក់ទងនឹងប្រដាប់មើលវីដេអូ -->
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
 
<!-- បណ្តាធាតុ div ចាំបាច់សំរាប់ដាក់ប្រដាប់មើលវីដេអូ Facebook -->
<div class="fb-player">
<div
  class="fb-video"
  data-href="https://www.facebook.com/video.php?v=10153231379946729"
  data-width="500"
  data-autoplay="false"
  data-allowfullscreen="true"></div>
</div>
 
<!-- បណ្តាធាតុខាងក្រោមនេះ គឺជាការបង្កើត menu សំរាប់ ចាក់ សំរាក និង បើកសំលេងវីដេអូ។ -->
<ul>
  <li><a onclick="play()">លេង</a></li>
  <li><a onclick="pause()">សំរាក</a></li>
  <li><a onclick="unmute()">បើកសំលេង</a></li>
</ul>
 
<script >
// កូដចាំបាច់សំរាប់ធ្វើអោយទំហំប្រដាប់មើលវិដេអូមានលក្ខណៈ «responsive»
var playerWidth = $('.fb-player').css('width');
$(".fb-video").attr("data-width",playerWidth);
 
//តំរូវអោយប្រដាប់មើលវីដេអួ Facebook លេងវីដេមានលេខរៀង 0 នៅក្នុងកំរងវីដេអូ playlist
$(".fb-video").attr("data-href",videoUrl);
 
/* ក្បួនទាំងបីខាងក្រោមនេះ ប្រើសំរាប់ឆ្លើយតបទៅនឹងការចុច menu 
ដែលជាពាក្យថា «លេង» «សំរាក» និង «បិទសំលេង» ។ */
function unmute(){
  player.unmute();
}
 
function play(){
  player.play();
}
 
function pause()
  player.pause();
}
</script>

តំណរភ្ជាប់ទៅកាន់ប្រដាប់ចាក់វីដេអូបង្កើតឡើងដោយកូដខាងលើ៖

https://www.khmerweb.app/2019/03/blog-post_23.html

ជាលទ្ធផល រាល់លើកនៅពេលដែលប្រដាប់មើលវីដេអូ Facebook លេងចប់វីដេអូមួយរឿង វានឹងចាប់ផ្តើមលេងវីដេអូថ្មីបន្ទាប់មកទៀតជាស្វ័យប្រវត្តិ។ ហើយបើវាលេងចប់ដល់វីដេអូចុងក្រោយគេ វានឹងចាប់ផ្តើមលេងវីដេអូខាងដើមគេសារជាថ្មីម្តងទៀត។

នៅក្នុងកូដខាងលើ ចាប់ពីបន្ទាត់លេខ 6 រហូតដល់បន្ទាត់លេខ 11 គឺជាការបង្កើតកំរងនៃអត្តសញ្ញាណវីដេអូនៅក្នុងប្រព័ន្ធ Facebook ។ កំរងវីដេអូនោះមានឈ្មោះថា «playlist» និងដែលមានអត្តសញ្ញាណវីដេអូចំនួន 5 ខុសៗគ្នានៅក្នុងនោះ។

នៅលើបន្ទាត់លេខ 14 គឺជាការបង្កើតវត្ថុមានឈ្មោះថា index តំណាងអោយលេខរៀងនៃអត្តសញ្ញាណវិដេអូនៅក្នុងកំរង playlist ។ តំលៃដំបូងបំផុតរបស់វត្ថុ index នោះគឹជាលេខ 0 ដែលលេខរៀងនៅខាងដើមគេរបស់អត្តសញ្ញាណវីដេអូនៅក្នុងកំរង playlist ។

នៅលើបន្ទាត់លេខ 18 គឺជាការបង្កើតតំណភ្ជាប់ទៅកាន់វីដេអូនៅក្នុងប្រព័ន្ធ Facebook ដែលមានអត្តសញ្ញាណមានលេខរៀងនៅខាងដើមកំរង playlist ។

នៅលើបន្ទាត់លេខ 106 គឺជាការតំរូវអោយប្រដាប់មើលវីដេអូ Facebook លេងវីដេអូដែលមានអត្តសញ្ញាណនៅខាងដើមកំរង playlist មុនគេ។ ដំណរភ្ជាប់ទៅកាន់វីដេអូនោះគឺជាតំលៃរបស់វត្ថុឈ្មោះ videoUrl ។

ជាលទ្ធផល ដូចយើងបានដឹងរួចមកហើយថា នៅពេលដែលប្រដាប់មើលវីដេអូ Facebook លេងចប់វីដេអូមួយរឿងៗ វាតែងតែបង្កើតនូវហេតុការណ៍មួយមានឈ្មោះថា «finishedPlaying» ដែលជាប្រការធ្វើអោយក្បួនអត់ឈ្មោះមួយដែលត្រូវបានតភ្ជាប់ជាមួយនឹងហេតុការណ៍នេះ ត្រូវយកទៅអនុវត្តជាស្វ័ប្រវត្តិ ដូចជាការសរសរនៅលើបន្ទាត់លេខ 48 នោះស្រាប់។

ហើយនៅពេលដែលក្បួននោះត្រូវយកទៅអនុវត្តជាស្វ័យប្រវត្តិ ផ្ទៃរបស់ browser នឹងប្រែក្លាយជាស វត្ថុឈ្មោះ index កើនតំលៃធំជាងមុនមួយ ដូចជាការសរសេរនៅលើបន្ទាត់លេខ 54 ។ ជាមួយគ្នានេះ តំលៃរបស់វត្ថុឈ្មោះ index ក៏ត្រូវផ្ទៀងផ្ទាត់ពិនិត្យមើលថាតើវាធំជាងតំលៃរប់សលេខរៀងអត្តសញ្ញាណវីដេអូចុងក្រោយគេនៅក្នុងកំរង playlist ដែរឬទេ បើធំជាង តំលៃរបស់វត្ថុ index នោះនឹងត្រូវប្តូរអោយស្មើរនឹងតំលៃលេខរៀងនៅខាងដើមកំរង playlist វិញ គឺស្មើសូន្យ ដូចជាការសរសេរនៅលើបន្ទាត់លេខ 58 និង 59 នោះស្រាប់។

បន្ទាប់មកទៀត វត្ថុឈ្មោះ videoUrl នឹងត្រូវប្តូរតំលៃរបស់វាអោយស្មើរនឹងតំណរភ្ជាប់ទៅកាន់វីដេអូបន្ទាប់មកទៀត ដែលអត្តសញ្ញាណរបស់វាមាននៅក្នុងកំរង playlist ដូចជាការសរសេរនៅលើបន្ទាត់លេខ 64 ។

ចុងក្រោយបង្អស់ វីដេអូនៅក្នងប្រដាប់មើលវីដេអូ Facebook នឹងត្រូវជំនួសដោយវីដេអូថ្មីដែលមានអត្តសញ្ញាណជាលេខរៀងបន្ទាប់ពីលេខរៀងនៃវីដេអូមុន ដូចជាការសរសេរនៅបន្ទាត់លេខ 68, 69 និង 70 ៕