Khmer Web: ហេតុការណ៍ YouTube

តើ «ហេតុការណ៍» ជាអ្វីទៅ? យោងតាមនិយមន័យទូទៅ «ហេតុការណ៍» (event) គឺជារឿងរ៉ាវទាំងឡាយណាដែលកើតមានឡើងដោយមិនបានដឹងជាមុន ឧទាហរណ៍ដូចជា ការត្រូវឆ្នោត ការជួបមិត្តសំលាញ់ចាស់ជាចៃដន្យជាដើម។

ទន្ទឹមនឹងនេះ មានរបៀបជាច្រើននៅក្នុងការសរសេរកម្មវិធីកំព្យូទ័រ ហើយក្នុងចំណោមរបៀបទាំងនោះ មានរបៀបសរសេរកម្មវិធីម៉្យាងហៅថា Event-Driven Programming ដែលអាចត្រូវបកប្រែជាភាសាខ្មែរមកថា ការសរសរកម្មវិធីដោយយោងលើ «ហេតុការណ៍» ឬអាចនិយាយបានម៉្យាងទៀតថា កម្មវិធីមានដំណើរការអាស្រ័យទៅលើ «ហេតុការណ៍» ផ្សេងៗដែលកើតមានឡើងដោយសារអ្នកប្រើប្រាស់កម្មវិធីចុចនេះឬចុចនោះ។

សំរាប់អ្នកប្រើប្រាស់កម្មវិធីកំព្យូទ័រ រឿងនេះមិនមែនជារឿងថ្មីនោះទេ គឺជាទំលាប់របស់ពួកគេទៅហើយនូវការចុចនេះឬចុចនោះដើម្បីចង់បើកមើលអ្វីម៉្យាងនោះ។ ក៏ប៉ុន្តែ សំរាប់អ្នកសរសេរកម្មវិធីកំព្យូទ័រ នៅពេលដែលអ្នកប្រើប្រាស់ចុចនេះឬចុចនោះ គឺជាការបង្កើត «ហេតុការណ៍» ផ្សេងៗអោយកើតមានឡើងនៅក្នុងកម្មវិធីកំព្យូទ័រ។

ដូចនេះ នៅពេលដែលអ្នកប្រើប្រាស់ចុចអ្វីម៉្យាង «ហេតុការណ៍» មួយនឹងកើតមានឡើង ហើយកម្មវិធីកំព្យូទ័រនឹងដំណើរការរួចផ្តល់នូវលទ្ធផលអ្វីម៉្យាងដែរ ដើម្បីឆ្លើយតបទៅនឹង «ហេតុការណ៍» ដែលបានកើតមានឡើងនោះ។ សរុបមក ការសរសេរកម្មវិធីកំព្យូទ័រដើម្បីឆ្លើយតបទៅនឹងការចុចផ្សេងៗរបស់អ្នកប្រើប្រាស់ ហៅថា ការសរសេរកម្មវិធីដោយយោងលើ «ហេតុការណ៍» ។

មួយវិញទៀត សំរាប់កម្មវិធីកំព្យូទ័រ «ហេតុការណ៍» មិនមែនកើតឡើងដោយសារតែអ្នកប្រើប្រាស់ចុចនេះឬចុចនោះតែមួយមុខនោះទ កម្មវិធីខ្លួនឯងក៏អាចបង្កើតនូវ «ហេតុការណ៍» ផ្សេងៗបានដែរ។ ជាក់ស្តែង នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ចាប់ផ្តើមដំណើរការ វានឹងបង្កើតនូវ «ហេតុការណ៍» មួយហៅថា «YT.PlayerState.PLAYING» ដែលយើងអាចសរសេរកម្មវិធីមួយចំនួនអោយដំណើរការ ដើម្បីឆ្លើយតបទៅនឹងហេតុការណ៍ «YT.PlayerState.PLAYING» នេះ។

ឧបមាថា នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ចាប់ផ្តើមដំណើរការ ដែលជាកត្តាធ្វើអោយហេតុការណ៍ «YT.PlayerState.PLAYING» កើតមានឡើង យើងចង់អោយ browser ដូរពណ៌ទៅជាខ្មៅជាស្វ័យប្រវត្តិ ដើម្បីអាចមើលវីដេអូដោយមិនចាំងភ្នែក។ ដើម្បីសំរេចបានគោលបំណងនេះ យើងត្រូវសរសេរកម្មវិធីដូចខាងក្រោមនេះ៖

<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>
  /*កូដខាងក្រោមនេះ គឺជាការចំលងយកក្បួនខ្នាតសំខាន់ៗនៅ
  នៅក្នុងប្រព័ន្ធ YouTube យកមកប្រើទាក់ទងនឹងប្រដាប់ចាក់វីដេអូ*/
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  /*កូដខាងក្រោមនេះ គឺជាការយក្បួនខ្នាតនៅក្នុងប្រព័ន្ធ YouTube
  យកមកបង្កើតប្រដាប់ចាក់វីដេអូថ្មីមួយដាក់ចូលទៅក្នុងធាតុដែលមាន
  អត្តសញ្ញាណជា «player» នៅខាងលើ។*/
  var player;
  function onYouTubeIframeAPIReady(){
    player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        controls: 0
      },
      events: {
        /*ការតភ្ចាប់ហេតុការណ៍ «onStateChange» កើតឡើងពីការផ្លាស់សភាពលក្ខណៈ
        របស់ប្រដាប់មើលវីដេអូ YouTube ទៅនឹងក្បួន «onPlayerStateChange» ។*/
        'onStateChange': onPlayerStateChange
      }
    });
  }

  /*ក្បួន «onPlayerStateChange» ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ 
  នៅពេលដែលហេតុការណ៍ «onStateChange» កើតមានឡើង*/
  function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.PLAYING){
      /*បើប្រដាប់មើលវីដេអូមានមានសភាពជាកំពុងលេង
      បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
      $('.main-outer').css("background-color","black");
    }else if(event.data == YT.PlayerState.PAUSED){
      /*បើប្រដាប់មើលវីដេអូស្ថិតក្នុងសភាពសំរាក
      បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
      $('.main-outer').css("background-color","#ffffff");
    }else if(event.data == YT.PlayerState.ENDED){
      /*បើប្រដាប់មើលវីដេអូមានមានសភាពជាលេងចប់
      បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
      $('.main-outer').css("background-color","#ffffff");
    }
  }

  /*ក្បួនទាំងបីខាងក្រោមនេះ ប្រើសំរាប់ឆ្លើយតប
  ទៅនឹងការចុច menu ដែលជាពាក្យថា «លេង» «សំរាក» និង «ឈប់» ។*/
  function stop(){
    player.stopVideo();
  }

  function play(){
    player.playVideo();
  }

  function pause(){
    player.pauseVideo();
  }
</script>

លេង
សំរាក
ឈប់

នៅបន្ទាត់លេខ 37 ការសរសេរថា 'onStateChange': onPlayerStateChange គឺជាការភ្ជាប់ហេតុការណ៍ «onStateChange» ទៅនឹងក្បួន «onPlayerStateChange» ។ ដូចនេះនៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ផ្លាស់ប្តូរសភាពរបស់វា ហេតុការណ៍ «onStateChange» នឹងកើតមានឡើងជាស្វ័យប្រវត្តិ ដែលនឹងជាហេតុបណ្តាលអោយក្បួនឈ្មោះ «onPlayerStateChange» នេះ នឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិដែរ។

ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពកំពុងលេង ដែលមានតំលៃស្មើនឹង YT.PlayerState.PLAYING បញ្ជានៅបន្ទាត់លេខ 48 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាខ្មៅ។

ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពសំរាក ដែលមានតំលៃស្មើនឹង YT.PlayerState.PAUSE បញ្ជានៅបន្ទាត់លេខ 52 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាសវិញ។

ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពលេងចប់ ដែលមានតំលៃស្មើនឹង YT.PlayerState.ENDED បញ្ជានៅបន្ទាត់លេខ 56 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាសវិញ។