យើងដឹងរួចមកហើយថា YouTube គឺជាប្រព័ន្ធមួយនៅលើ Internet សំរាប់អោយមនុស្សមនានៅជុំវិញពិភពលោកយកវីដេអូរបស់គេទៅទុកនៅទីនោះ ដើម្បីអាចអនុញ្ញាតអោយអ្នកផ្សេងទៀតអាចទស្សនាវីដេអូរបស់ពួកគេ និងឬចែករំលែកជាមួយនឹងអ្នកឯទៀតៗ នៅពាសពេញពិភពលោក។
មួយវិញទៀត ដើម្បីអនុញ្ញាតអោយទស្សនិកជនទាំងឡាយអាចបញ្ឍប់វីដេអូនៅមួយកន្លែង (pause) រំលងវីដេអូមួយចំនួន (skip) ឬបិទវីដេអូឈប់លែងមើល (stop) ប្រព័ន្ធ YouTube បានបង្កើតប្រដាប់ចាក់វីដេអូ (player) មានស្រាប់មួយអោយយើង ដើម្បីអាចធ្វើសកម្មភាពដូចការរៀបរាប់ខាងលើនេះ អាស្រ័យទៅតាមបំណងរបស់យើង។
ក៏ប៉ុន្តែលើសពីនេះទៀត ប្រព័ន្ធ YouTube ក៏អនុញ្ញាអោយយើងអាចយកប្រដាប់ចាក់វីដេអូរបស់គេ ទៅកែច្នៃរចនាជាប្រដាប់ចាក់មើលវីដេអូមានរូបរាងប្លែកៗ អាស្រ័យទៅតាមចំណង់ចំណូលចិត្តរបស់យើងផងដែរ (customization) ។ ហើយការរចនាកែច្នៃប្រដាប់ចាក់វីដេអូ YouTube អាចត្រូវធ្វើឡើងតាមរយៈការសរសេរកម្មវិធីជាភាសា JavaScript ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
/*កូដខាងក្រោមនេះ គឺជា 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;
}
<!--ធាតុ 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>
/*កូដខាងក្រោមនេះ គឺជាការចំលងយកក្បួនខ្នាតសំខាន់ៗនៅ
នៅក្នុងប្រព័ន្ធ 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: 0
}
});
}
/*ក្បួនទាំងបីខាងក្រោមនេះ ប្រើសំរាប់ឆ្លើយតប
ទៅនឹងការចុច menu ដែលជាពាក្យថា «លេង» «សំរាក» និង «ឈប់» ។*/
function stop(){
player.stopVideo();
}
function play(){
player.playVideo();
}
function pause(){
player.pauseVideo();
}
</script>
តំណរភ្ជាប់ទៅកាន់ប្រដាប់ចាក់វីដេអូបង្កើតឡើងដោយកូដខាងលើៈ