반응형
youtube javascript 로 동작 제어하기
원본
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by salman</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
</head>
<body>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video. </div>
<div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a> </div>
<div>
<a href="#" onclick="play(); return false;">Play</a>
<a href="#" onclick="pause(); return false;">Pause</a> </div>
<script type="text/javascript">//<![CDATA[
var ytplayer;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myvideo");
}
var params = {
allowScriptAccess: "always"
};
var atts = {
id: "myvideo"
};
swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3", "ytapiplayer", "425", "270", "8", null, null, params, atts);
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function load(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by salman</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
</head>
<body>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video. </div>
<div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a> </div>
<div>
<a href="#" onclick="play(); return false;">Play</a>
<a href="#" onclick="pause(); return false;">Pause</a> </div>
<script type="text/javascript">//<![CDATA[
var ytplayer;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myvideo");
}
var params = {
allowScriptAccess: "always"
};
var atts = {
id: "myvideo"
};
swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3", "ytapiplayer", "425", "270", "8", null, null, params, atts);
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function load(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}
//]]>
</script>
</body>
</html>
위의 소스에서 embedSWF 를 사용하지 않고 해보려고 하는대 object tag 로 하면 계속 오류가 발생했다.
하지만 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 를 적어주니 이 기능들이 동일하게 동작하였다.
수정하는 동안 원본 페이지를 닫아 버려서 원본 주소는 잊어 버렸다.
변형본
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by salman</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div>
<object width="626" height="352" id="myvideo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://www.youtube.com/v/0Z9R57maGvc?hl=ko_KR&version=3&rel=0&enablejsapi=1&autohide=1&showinfo=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="enablejsapi" value="1" />
<embed src="http://www.youtube.com/v/0Z9R57maGvc?hl=ko_KR&version=3&rel=0&enablejsapi=1&autohide=1&showinfo=0" type="application/x-shockwave-flash" width="626" height="352" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
<div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a> </div>
<div>
<a href="#" onclick="play(); return false;">Play</a>
<a href="#" onclick="pause(); return false;">Pause</a> </div>
<script type="text/javascript">//<![CDATA[
function onYouTubePlayerReady(playerId) {
var ytplayer;
ytplayer = document.getElementById("myvideo");
}
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function load(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by salman</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div>
<object width="626" height="352" id="myvideo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://www.youtube.com/v/0Z9R57maGvc?hl=ko_KR&version=3&rel=0&enablejsapi=1&autohide=1&showinfo=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="enablejsapi" value="1" />
<embed src="http://www.youtube.com/v/0Z9R57maGvc?hl=ko_KR&version=3&rel=0&enablejsapi=1&autohide=1&showinfo=0" type="application/x-shockwave-flash" width="626" height="352" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
<div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a> </div>
<div>
<a href="#" onclick="play(); return false;">Play</a>
<a href="#" onclick="pause(); return false;">Pause</a> </div>
<script type="text/javascript">//<![CDATA[
function onYouTubePlayerReady(playerId) {
var ytplayer;
ytplayer = document.getElementById("myvideo");
}
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function load(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}
//]]>
</script>
</body>
</html>
Look at the source code for this page to see how it's done. Some things you can use:
ytplayer.loadVideoById(id, startSeconds); ytplayer.cueVideoById(id, startSeconds); ytplayer.playVideo(); ytplayer.pauseVideo(); ytplayer.stopVideo(); ytplayer.getState(); ytplayer.seekTo(seconds, true); ytplayer.getVideoBytesLoaded(); ytplayer.getVideoBytesTotal(); ytplayer.getCurrentTime(); ytplayer.getDuration(); ytplayer.getVideoStartBytes(); ytplayer.mute(); ytplayer.unMute(); ytplayer.getVideoEmbedCode() ytplayer.getVideoUrl(); ytplayer.setVolume(newVolume); ytplayer.getVolume(); ytplayer.clearVideo();
Youtube - How to force 480p video quality in embed link / <iframe>
Append the following paramter to the Youtube-URL:
240p: &vq=small
360p: &vq=medium
480p: &vq=large
720p: &vq=hd720
For instance:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4"becomes:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4&vq=large"
반응형
'Story > Javascript' 카테고리의 다른 글
| 위지윅 에디터 KindEditor 에서 옵션값 변경 샘플 (0) | 2014.01.14 |
|---|---|
| 보색 구하기 complementary color , Opposite Color (0) | 2013.01.21 |
| 페이지 번역 위젯 (0) | 2012.09.26 |
| jquery calendar scheduler (0) | 2012.06.08 |
| The Node beginner book (0) | 2012.06.08 |