គេហទំព័រ DEVOpenBlogger បានចុះផ្សាយរួចមកហើយនូវអ្វីដែលហៅថា «ហេតុការណ៍» វីដេអូ YouTube ដែលជាហេតុការណ៍ត្រូវបានបង្កើតឡើងដោយប្រដាប់មើលវីដេអូ YouTube នៅពេលដែលវាផ្លាស់ប្តូរសភាពលក្ខណៈរបស់វាពីសភាពមួយទៅសភាពមួយទៀតដូចជា ការចាប់ផ្តើមលេងវីដេអូ ការសំរាកឈប់ស្ងៀម និង ការលេងចប់ ជាដើម។
មួយវិញទៀត នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ផ្លាស់ប្តូរសភាពលក្ខណៈ វាតែងតែបង្កើតនូវ «ហេតុការណ៍» ផ្សេងៗទាក់ទងនឹងសភាពលក្ខណៈទាំងនោះ មានដូចជានៅពេលដែលវាចាប់ផ្តើមលេងវីដេអូ វាបង្កើតនូវហេតុការណ៍មួយប្រភេទមានឈ្មោះថា «YT.PlayerState.PLAYING» ជាដើម។
ជាទូទៅ នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube បង្កើតនូវហេតុការណ៍ណាមួយ យើងអាចបង្កើតក្បួន (function) ផ្សេងៗដែលនឹងត្រូវយកទៅអនុវត្តជាស្វ័យប្រវត្តិបង្កើតជាលទ្ធផលផ្សេងៗដែលយើងចង់បាន ដើម្បីឆ្លើយតបទៅនឹងហេតុការណ៍នោះ។ ក្បួនទាំងនោះត្រូវបានគេអោយឈ្មោះថាជា ក្បួនឆ្លើយតបហេតុការណ៍ (event handler) ។
ដូចគ្នាដែរ ប្រដាប់មើលវីដេអូរបស់ប្រព័ន្ធ Facebook ក៏អាចបង្កើតនូវហេតុការណ៍មួយចំនួនទាក់ទងទៅនឹងសភាពលក្ខណៈរបស់វាដែរ ឧទាហរណ៍ដូចជានៅពេលដែលវាចាប់ផ្តើមលេងវីដេអូ វានឹងបង្កើតនូវហេតុការណ៍ម៉្យាងហៅថា «startedPlaying» ដែលយើងអាចបង្កើតក្បួនមួយចំនួនដើម្បីឆ្លើយតបទៅនឹងហេតុការណ៍នេះបានដែរ។
ឧបមាថា នៅពេលដែលប្រដាប់មើលវីដេអូ Facebook ចាប់ផ្តើមដំណើរការ ដែលជាកត្តាធ្វើអោយហេតុការណ៍ «startedPlaying» កើតមានឡើង។ ដើម្បីឆ្លើយតបទៅនឹងហេតុការណ៍នេះ យើងចង់អោយ browser ដូរពណ៌ទៅជាខ្មៅជាស្វ័យប្រវត្តិ ដើម្បីអាចមើលវីដេអូដោយមិនចាំងភ្នែក។ មួយវិញទៀត នៅពេលដែលប្រដាប់មើលវីដេអូស្ថិតក្នុងសភាពសំរាក (pause) ឬលេងចប់ (ended) យើងចង់អោយផ្ទៃ 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>
//បង្កើតឈ្មោះ «player» មួយទុកសំរាប់ភ្ជាប់ទៅនឹងវត្ថុដែលជាប្រដាប់មើលវីដេអូ
var player;
/* ទាញយកក្បួនខ្នាតចាំបាច់ពីប្រព័ន្ធ 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");
});
}
});
};
</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-allowfullscreen="true"></div>
</div>
<script >
// កូដចាំបាច់សំរាប់ធ្វើអោយទំហំប្រដាប់មើលវិដេអូមានលក្ខណៈ «responsive»
var playerWidth = $('.fb-player').css('width');
$(".fb-video").attr("data-width",playerWidth);
/* ក្បួនទាំងបីខាងក្រោមនេះ ប្រើសំរាប់ឆ្លើយតបទៅនឹងការចុច menu
ដែលជាពាក្យថា «លេង» «សំរាក» និង «បិទសំលេង» ។ */
function unmute(){
player.unmute();
}
function play(){
player.play();
}
function pause(){
player.pause();
}
</script>
នៅលើបន្ទាត់លេខ 21 គឺជាការភ្ជាប់ហេតុការណ៍ឈ្មោះ «startedPlaying» ដែលនឹងត្រូវបង្កើតឡើងដោយប្រដាប់មើលវីដេអូឈ្មោះ player នៅពេលដែលវាចាប់ផ្តើមលេងវីដេអូ។ ដូចនេះ នៅពេលដែលវីដេអូចាប់ផ្តើមលេង ក្បួនជាបនឹងហេតុការណ៍នេះនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ ដែលជាប្រការធ្វើអោយផ្ទៃរបស់ browser ក្លាយទៅជាខ្មៅ។
នៅលើបន្ទាត់លេខ 27 គឺជាការភ្ជាប់ហេតុការណ៍ឈ្មោះ «paused» ដែលនឹងត្រូវបង្កើតឡើងដោយប្រដាប់មើលវីដេអូឈ្មោះ player នៅពេលដែលវាស្ថិតក្នងស្ថានភាពសំរាក។ ដូចនេះ នៅពេលដែលប្រដាប់មើលវីដេអូស្ថិតក្នុងភាពសំរាក ក្បួនជាបនឹងហេតុការណ៍នេះនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ ដែលជាប្រការធ្វើអោយផ្ទៃរបស់ browser ក្លាយទៅជាពណ៌សវិញ។
នៅលើបន្ទាត់លេខ 33 គឺជាការភ្ជាប់ហេតុការណ៍ឈ្មោះ «finishedPlaying» ដែលនឹងត្រូវបង្កើតឡើងដោយប្រដាប់មើលវីដេអូឈ្មោះ player នៅពេលដែលវាស្ថិតក្នងស្ថានភាពលេងចប់។ ដូចនេះ នៅពេលដែលវីដេអូត្រូវលេងចប់ ក្បួនជាបនឹងហេតុការណ៍នេះនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ ដែលជាប្រការធ្វើអោយផ្ទៃរបស់ browser ក្លាយទៅជាពណ៌សវិញដែរ៕
