ក្រៅពីតំរូវអោយប្រដាប់មើលវីដេអូរបស់ប្រព័ន្ធ YouTube ឬ Facebook លេងវីដេអូតែមួយរឿងដាច់ៗពីគ្នា យើងក៏អាចតំរូវអោយប្រដាប់មើលវីដេអូទាំងនោះ លេងវីដេអូម្តងមួយខ្សែជាប់គ្នាតែម្តងក៏បានដែរ។ ឧទារណ៍ ដូចជារឿងភាគជាដើម ដែលមានវីដេអូជាច្រើនភាគជាប់ៗរហូតដល់រាប់រយឯណោះក៏មានដែរ។
ដើម្បីសំរេចគោលបំណងនេះបាន យើងចាំបាច់ត្រូវបង្កើតកំរងវីដេអូមួយ (playlist) ដែលនៅក្នុងនោះអាចមានវីដេអូមានចំនួនប៉ុន្មានភាគក៏បានដែរ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
ជាលទ្ធផល រាល់លើកនៅពេលដែលប្រដាប់មើលវីដេអូ 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 ៕
ដើម្បីសំរេចគោលបំណងនេះបាន យើងចាំបាច់ត្រូវបង្កើតកំរងវីដេអូមួយ (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>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<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>
<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>
ជាលទ្ធផល រាល់លើកនៅពេលដែលប្រដាប់មើលវីដេអូ 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 ៕
