【JS】YouTube의 iframe 삽입 동영상을 JS로 컨트롤
그건 그렇고, YouTube는 ie8 지원을 더 이상하지 않는 것 같습니다. ie8에서 YouTube에 액세스하면 다음과 같은 화면이됩니다.
구현
샘플 페이지
HTML
HTML의 핵심은 iframe의 src에 enablejsapi = 1이라는 매개 변수를 추가하는 것입니다.
enablejsapi를 1로 설정하면 플레이어 JavaScript API이 활성화됩니다.
다른 매개 변수는 여기를 참조 → YouTube IFrame API Parameters
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
</head>
<body>
<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.YouTube.com/embed/13S9kfvkchA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
</body>
</html>
JS(jQuery)
JS에서는 iframe의 window에 postMessage로 이벤트를 전달해 준다.
이것만으로 재생, 정지, 정지를 제어할 수 있습니다.
클리어는 어쩔 수 없었다. .
YouTube IFrame API 재생 제어
script.js
$(function(){
$("#play").on("click", function(){
videoControl("playVideo");
});
$("#pause").on("click", function(){
videoControl("pauseVideo");
});
$("#stop").on("click", function(){
videoControl("stopVideo");
});
$("#clear").on("click", function(){
videoControl("clearVideo");
});
function videoControl(action){
var $playerWindow = $('#popup-YouTube-player')[0].contentWindow;
$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
});
postMessage 참고
Reference
이 문제에 관하여(【JS】YouTube의 iframe 삽입 동영상을 JS로 컨트롤), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/konweb/items/ab414d75ecddfb0cf4e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
