គេហទំព័រ DEVOpenBlogger បានចុះផ្សាយរួចមកហើយថា ប្រព័ន្ធ YouTube អនុញ្ញាតអោយយើងអាចយកប្រដាប់មើលវីដេអូរបស់គេ មករចនាកែច្នៃអោយមានរូបរាងផ្សេងៗ (customize) យោងលើការនិយមចូលចិត្តរបស់យើង ដោយការសរសេរកម្មវិធីជាភាសា JavaScript ។ ទន្ទឹមនឹងនេះ ប្រព័ន្ធ Facebook ក៏អនុញ្ញាតអោយយើងយកប្រដាប់មើលវីដេរបស់គេ មកធ្វើការកែច្នៃ ដោយសរសេរកម្មវិធីជាភាសា 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>
//បង្កើតឈ្មោះ «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;
}
});
};
</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>
