React 19 버전에 추가될 기능들을 알아보자
2024-10-18
vimeo Javascript API로 영상을 음소거 후 자동 재생시킵니다. ( + 버튼 재생, 일시정지)
2014-04-24
Explanation
비메오의 자바스크립트 API를 사용하여 영상을 음소거 한 후 재생시키기.
<Embed Code>의 파라미터 ‘autoplay’는 입력하지 않거나 ‘&autoplay=0’ 이여야 한다.
소스보기
|
1 2 3 |
[HTML] <iframe src="http://player.vimeo.com/video/12345678" id="vimeo_iframe"></iframe> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
[JAVASCRIPT] jQuery(document).ready(function($){ $(window).load(function() { cgs_vimeo_volume_control(); //window가 로드되면 함수 실행 }); function cgs_vimeo_volume_control() { var f = $("#vimeo_iframe");//<iframe src="http://player.vimeo.com/video/12345678" id="vimeo_iframe"></iframe>"; if (!f || !f.attr("src")) return; var url = f.attr("src").split("?")[0]; var data = { "method" : "setVolume", "value" : 0 };//볼륨을 0으로 설정 f[0].contentWindow.postMessage(JSON.stringify(data), url); var data = { "method" : "play", "value" : 1 }//영상 재생 f[0].contentWindow.postMessage(JSON.stringify(data), url); } }); |
소스보기
|
1 2 3 4 5 6 7 |
[HTML] <iframe src="http://player.vimeo.com/video/12345678" id="vimeo_iframe"></iframe> <!-- button --> <p id="play">재생</p> <p id="stop">일시정지</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
[JAVASCRIPT] jQuery(document).ready(function($){ vimeo_play_and_stop(); function vimeo_play_and_stop(){ var f = $("#vimeo_iframe"); if(!f || !f.attr("src") ) return; var url = f.attr("src").split("?")[0]; $("#play").click(function(){ var data = { method : "setVolume", value : 0 } f[0].contentWindow.postMessage(JSON.stringify(data), url); var data = { method: "play", value: 1 }; f[0].contentWindow.postMessage(JSON.stringify(data), url); }); $("#stop").click(function(){ var data = { method: "pause", value: 1 }; f[0].contentWindow.postMessage(JSON.stringify(data), url); }); } }); |
