ក្រៅពីតំរូវអោយប្រដាប់មើលវីដេអូរបស់ប្រព័ន្ធ 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> //ការបង្កើតកំរងវីដេអូមួយ ដែលនៅក្នុងនោះមានវីដេអូចំនួន ៥ រឿង var playlist = []; playlist[0] = 'F9NkHE5W4Hc'; playlist[1] = 'vpmbVRQazqw'; playlist[2] = 'B2oPVqDHR3g'; playlist[3] = 'xO2IbMZzKz0'; playlist[4] = 'kZRA7ULqLZI'; /*កូដខាងក្រោមនេះ គឺជាការចំលងយកក្បួនខ្នាតសំខាន់ៗនៅ នៅក្នុងប្រព័ន្ធ 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: 1 }, events: { /*ការភ្ជាប់ហេតុការណ៍ «onReady» ទៅនឹងក្បួន «onPlayerReady» ។ ហេតុការណ៍នេះកើតឡើង នៅពេលដែលប្រដាប់មើលវីដេអូឈ្មោះ player ត្រូវបានបង្កើតឡើងរូចរាល់ ។*/ 'onReady': onPlayerReady, /*ការតភ្ចាប់ហេតុការណ៍ «onStateChange» ទៅនឹងក្បួន «onPlayerStateChange» ។ ហេតុការណ៍កើតឡើងពីការផ្លាស់សភាពលក្ខណៈរបស់ប្រដាប់មើលវីដេអូឈ្មោះ player ។*/ 'onStateChange': onPlayerStateChange } }); } /*ក្បួន «onPlayerReady» នេះនឹងត្រូវយកទៅប្រើដោយស្វ័យប្រវត្តិ នៅពេលដែលប្រដាប់មើលវីដេអូឈ្មោះ player ត្រូវបានបង្កើតឡើងរួចរាល់។*/ function onPlayerReady(event) { player.cuePlaylist(playlist); } /*ក្បួន «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>
ចាប់ពីបន្ទាត់លេខ 16 រហូតដល់បន្ទាត់លេខ 21 គឺជាការបង្កើតកំរងនៃអត្តសញ្ញាណវីដេអូនៅក្នុងប្រព័ន្ធ YouTube ។ កំរងវីដេអូនោះមានឈ្មោះថា «playlist» និងដែលមានអត្តសញ្ញាណវីដេអូចំនួន 5 ខុសៗគ្នានៅក្នុងនោះ។
នៅលើបន្ទាត់លេខ 45 ការសរសេរថា 'onReady': onPlayerReady គឺជាការភ្ជាប់ហេតុការណ៍ឈ្មោះ «onReady» ទៅនឹងក្បួនមួយមានឈ្មោះថា «onPlayerReady» ។ ដូចនេះនៅពេលដែលហេតុការណ៍ «onReady» កើតមានឡើងនៅពេលដែលប្រដាប់មើលវីដេអួឈ្មោះ player ត្រូវបានបង្កើតរួចស្រេចប៉ាច់ ក្បួនឈ្មោះ «onPlayerReady» នេះនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ។
នៅលើបន្ទាត់លេខ 54 គឺជាការបង្កើតក្បួនមួយមានឈ្មោះថា «onPlayerReady» ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិនៅពេលដែលហេតុការណ៍ «onReady» កើតមានឡើង ដែលនឹងបណ្តាលអោយកំរងវិដេអូមានឈ្មោះថា playlist ត្រូវយកទៅដាក់ក្នុងប្រដាប់មើលវីដេអូ YouTube មានឈ្មោះថា player ៕
