Khmer Web: រចនាប្រដាប់មើល YouTube

យើងដឹងរួចមកហើយថា YouTube គឺជាប្រព័ន្ធមួយនៅលើ Internet សំរាប់អោយមនុស្សមនានៅជុំវិញពិភពលោកយកវីដេអូរបស់គេទៅទុកនៅទីនោះ ដើម្បីអាចអនុញ្ញាតអោយអ្នកផ្សេងទៀតអាចទស្សនាវីដេអូរបស់គេ និងឬចែករំលែកជាមួយនឹងអ្នកឯទៀតៗ នៅលើផែនដីទាំងមូល។

មួយវិញទៀត ដើម្បីអនុញ្ញាតអោយទស្សនិកជនទាំងឡាយអាចបញ្ឍប់វីដេអូនៅមួយកន្លែង (pause) រំលងវីដេអូមួយចំនួន (skip) ឬបិទវីដេអូឈប់លែងមើល (stop) ប្រព័ន្ធ YouTube បានបង្កើតប្រដាប់ចាក់វីដេអូ (player) មានស្រាប់មួយអោយយើង ដើម្បីអាចធ្វើសកម្មភាពដូចការរៀបរាប់ខាងលើនេះ អាស្រ័យទៅតាមបំណងរបស់យើង។

ក៏ប៉ុន្តែលើសពីនេះទៀត ប្រព័ន្ធ YouTube ក៏អនុញ្ញាអោយយើងអាចយកប្រដាប់ចាក់វីដេអូរបស់គេ ទៅកែច្នៃរចនាជាប្រដាប់ចាក់មើលវីដេអូមានរូបរាងប្លែកៗ អាស្រ័យទៅតាមចំណង់ចំណូលចិត្តរបស់យើងផងដែរ (customization) ។ ហើយការរចនាកែច្នៃប្រដាប់ចាក់វីដេអូ YouTube អាចត្រូវធ្វើឡើងតាមរយៈការសរសេរកម្មវិធីជាភាសា JavaScript ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖

<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
      }
    });
  }

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

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

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

លេង
សំរាក
ឈប់