|
| |
เขียน jQuery สคริป ปรับ Volume เสียงของ YouTube |
เขียนสคริป ปรับ Volume เสียงของ YouTube แบ่งปันกันครับ สคริปทั้งหมด จะใช้ jQuery UI เป็นตัว Slider สำหรับควบคุมเสียงของ Youtube
และสำหรับสคริปที่เล่น youtube จะใช้ jquery-youtube-player นะครับ
จากกระทู้นี้ ของคุณ aibot เห็นว่ามีประโยชน์สำหรับผู้จะนำไปประยุกต์นะครับ
https://www.thaicreate.com/php/forum/108804.html
รายละเอียด
ในสคริปนี้ จะเป็นการนำสคริปที่ผมเคยทำไว้ มาลงไว้ ซึ่งคิดว่าอาจจะมีประโยชน์สำหรับท่านที่ต้องการนำสคริปไปใช้งานนะครับ
รายละเอียด
สคริปทั้งหมด จะใช้ Jquery UI เป็นตัว Slider สำหรับควบคุมเสียงของ Youtube
และสำหรับสคริปที่เล่น youtube จะใช้ jquery-youtube-player นะครับ
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<style>
.youtube-player{font-size:86%;position:relative;}
.youtube-player-toolbar{background:#ff6600;margin:.1em 0 0 0;}
.youtube-player-toolbar li.youtube-player-time{float:right;font-weight:normal;font-size:13px;line-height:28px;margin:0pt 5px 0pt 0pt;padding:0;display:none;cursor:default;}
.youtube-player-object{border:1px solid #282828;}
.youtube-player-toolbar li{cursor:pointer;float:left;list-style:none outside none;margin:2px;padding:4px 0;}
.youtube-player-toolbar li span.ui-icon{float:left;margin:0 4px;}
.youtube-player-playlist-container{border:1px solid #282828;margin-top:.2em;position:relative;display:none;}
.youtube-player-playlist{list-style:decimal;overflow:auto;margin:2px;padding:0;}
.youtube-player-playlist li{overflow-x:hidden;border:0;cursor:pointer;text-decoration:none;list-style:decimal;padding:2px 4px 2px;white-space:nowrap;font-size:13px;}
.youtube-player-playlist .youtube-player-thumb{float:left;height:90px;width:124px;list-style:none;overflow:hidden;}
.youtube-player-playlist .youtube-player-thumb img{height:90px;width:124px;}
.ui-state-default,.ui-widget-content .ui-state-default{background:-9999px -9999px;}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background:50% 50%;}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:#333;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="http://badsyntax.github.io/jquery-youtube-player/js/jquery.youtube.player.js"></script>
<meta charset="utf-8">
<title>YOUTUBE PLAYLIST</title>
</head>
<body>
<div style="border: 1px solid rgb(255, 102, 0); width: 450px; padding:5px;">
<div class="youtube-player" >
<div class="youtube-player-video"><div class="youtube-player-object">You need Flash player 8+ and JavaScript enabled to view this video.</div></div>
</div>
<div id="volume"></div>
<div id="toolbar"></div>
Timer: <div id="time" style="display:inline"></div>
</div>
<script>
$(function() {
$( "#volume" ).slider({
orientation: "horizontal",
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('.youtube-player-video object').get(0).setVolume(ui.value);
$("#amount").val(ui.value);
}
});
$("#amount").val($("#volume").slider("value"));
});
(function($){
var config = {
toolbarAppendTo: '#toolbar', // selector
// playlistAppendTo: '#playlist', // selector
timeAppendTo: '#time', // selector
// Custom playlist
playlist: {
title: 'Random videos',
videos: [
{ id: 'hPzNl6NKAG0', title: 'แมวเหมียวๆ' }
]
}
};
$('.youtube-player').player(config);
})(this.jQuery);
</script>
</body>
</html>
deawx ( 089-0499359)
[email protected]
ปรึกษา PHP ฟรีจ้า
Reference : http://www.cyberthai.net
|
|
| |
By : |
deawx
|
| |
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
| |
Score Rating : |
 |
| |
Create Date : |
2014-06-01 |
| |
Download : |
No files |
|
|
Sponsored Links |
|
|
|
|
|
|
Load balance : Server 02
