jQuery adjust Volume YouTube (JS)

ใน
Screenเขียนสคริป ปรับ Volume เสียงของ YouTube แบ่งปันกันครับ สคริปทั้งหมด จะใช้ jQuery UI เป็นตัว Slider สำหรับควบคุมเสียงของ Youtube และสำหรับสคริปที่เล่น youtube จะใช้ jquery-youtube-player นะครับ



รายละเอียด
ในสคริปนี้ จะเป็นการนำสคริปที่ผมเคยทำไว้ มาลงไว้ ซึ่งคิดว่าอาจจะมีประโยชน์สำหรับท่านที่ต้องการนำสคริปไปใช้งานนะครับ


รายละเอียด
สคริปทั้งหมด จะใช้ Jquery UI เป็นตัว Slider สำหรับควบคุมเสียงของ Youtube
และสำหรับสคริปที่เล่น youtube จะใช้ jquery-youtube-player นะครับ

Code (PHP)
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"type="text/css" />
05.<style>
06..youtube-player{font-size:86%;position:relative;}
07..youtube-player-toolbar{background:#ff6600;margin:.1em 0 0 0;}
08..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;}
09..youtube-player-object{border:1px solid #282828;}
10..youtube-player-toolbar li{cursor:pointer;float:left;list-style:none outside none;margin:2px;padding:4px 0;}
11..youtube-player-toolbar li span.ui-icon{float:left;margin:0 4px;}
12..youtube-player-playlist-container{border:1px solid #282828;margin-top:.2em;position:relative;display:none;}
13..youtube-player-playlist{list-style:decimal;overflow:auto;margin:2px;padding:0;}
14..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;}
15..youtube-player-playlist .youtube-player-thumb{float:left;height:90px;width:124px;list-style:none;overflow:hidden;}
16..youtube-player-playlist .youtube-player-thumb img{height:90px;width:124px;}
17..ui-state-default,.ui-widget-content .ui-state-default{background:-9999px -9999px;}
18..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%;}
19..ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:#333;}
20.</style>
21.<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
22.<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
23.<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
24.<script src="http://badsyntax.github.io/jquery-youtube-player/js/jquery.youtube.player.js"></script> 
25.<meta charset="utf-8">
26.<title>YOUTUBE PLAYLIST</title>
27.</head>
28.<body>
29. 
30.<div style="border: 1px solid rgb(255, 102, 0); width: 450px; padding:5px;"> 
31.<div class="youtube-player"  >
32.<div class="youtube-player-video"><div class="youtube-player-object">You need Flash player 8+ and JavaScript enabled to view this video.</div></div>
33.</div>
34.<div id="volume"></div>
35.<div id="toolbar"></div>
36.Timer: <div id="time" style="display:inline"></div>
37.</div>
38. 
39.<script>
40.$(function() {
41.$( "#volume" ).slider({
42.orientation: "horizontal",
43.range: "min",
44.value: 50,
45.min: 0,
46.max: 100,
47.slide: function(event, ui) {
48.$('.youtube-player-video object').get(0).setVolume(ui.value);
49.$("#amount").val(ui.value);
50.} 
51.});
52.$("#amount").val($("#volume").slider("value"));
53.});
54.(function($){
55.var config =  {
56.toolbarAppendTo: '#toolbar',    // selector
57.//  playlistAppendTo: '#playlist',    // selector
58.timeAppendTo: '#time',        // selector
59. 
60.// Custom playlist
61.playlist: {
62.title: 'Random videos',
63.videos: [
64.{ id: 'hPzNl6NKAG0', title: 'แมวเหมียวๆ' }
65.]
66.}
67.};
68.$('.youtube-player').player(config);
69.})(this.jQuery);
70.</script>
71.</body>
72.</html>

crd : cyberthai