ក្រៅពីតំរូវអោយប្រដាប់មើលវីដេអូរបស់ប្រព័ន្ធ 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>
<!--ធាតុ div ទាំងពីរខាងក្រោមនេះ គឺជាធាតុចាំបាច់សំរាប់បង្កើតប្រដាប់ចាក់វីដេអូ YouTube ថ្មីមួយ
ដែលមានអត្តសញ្ញាណជា «player»។-->
<div style="position:relative;padding-top:56.25%;">
<div id="player" style="position:absolute;top:0;left:0;"></div>
</div>
<!--បណ្តាធាតុខាងក្រោមនេះ គឺជាការបង្កើត menu សំរាប់ ចាក់ សំរាក និង បញ្ឍប់វីដេអូ ។-->
<ul>
<li><a onclick="play()">លេង</a></li>
<li><a onclick="pause()">សំរាក</a></li>
<li><a onclick="stop()">ឈប់</a></li>
</ul>
<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>
ដំណរភ្ជាប់ទៅកាន់ប្រដាប់ចាក់វីដេអូបង្កើតឡើងដោយកូដខាងលើៈ
https://www.khmerweb.app/2019/03/youtube_23.html
ចាប់ពីបន្ទាត់លេខ 16 រហូតដល់បន្ទាត់លេខ 21 គឺជាការបង្កើតកំរងនៃអត្តសញ្ញាណវីដេអូនៅក្នុងប្រព័ន្ធ YouTube ។ កំរងវីដេអូនោះមានឈ្មោះថា «playlist» និងដែលមានអត្តសញ្ញាណវីដេអូចំនួន 5 ខុសៗគ្នានៅក្នុងនោះ។
នៅលើបន្ទាត់លេខ 45 ការសរសេរថា 'onReady': onPlayerReady គឺជាការភ្ជាប់ហេតុការណ៍ឈ្មោះ «onReady» ទៅនឹងក្បួនមួយមានឈ្មោះថា «onPlayerReady» ។ ដូចនេះនៅពេលដែលហេតុការណ៍ «onReady» កើតមានឡើងនៅពេលដែលប្រដាប់មើលវីដេអួឈ្មោះ player ត្រូវបានបង្កើតរួចស្រេចប៉ាច់ ក្បួនឈ្មោះ «onPlayerReady» នេះនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ។
នៅលើបន្ទាត់លេខ 54 គឺជាការបង្កើតក្បួនមួយមានឈ្មោះថា «onPlayerReady» ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិនៅពេលដែលហេតុការណ៍ «onReady» កើតមានឡើង ដែលនឹងបណ្តាលអោយកំរងវិដេអូមានឈ្មោះថា playlist ត្រូវយកទៅដាក់ក្នុងប្រដាប់មើលវីដេអូ YouTube មានឈ្មោះថា player ៕