[javascript] 자동 재생 YouTube 동영상을 iframe에 포함시키는 방법은 무엇입니까?

새로운 iframe 버전의 YouTube 동영상을 포함시키고 자동으로 재생하려고합니다.

내가 알 수있는 한, URL에 플래그를 수정 하여이 작업을 수행 할 수있는 방법이 없습니다. JavaScript 및 API를 사용하여이를 수행 할 수있는 방법이 있습니까?



답변

Chrome에서는 작동하지만 Firefox 3.6에서는 작동하지 않습니다 (경고 : RickRoll 비디오).

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

iframe을 삽입의 자바 스크립트 API는 존재하지만 아직 실험적인 기능으로 게시됩니다.

업데이트 : iframe API가 이제 완전히 지원되며 “YT.Player 객체 생성-예제 2” 는 JavaScript에서 “자동 재생”을 설정하는 방법을 보여줍니다.


답변

내장 된 youtube 코드는 기본적으로 자동 재생 기능이 꺼져 있습니다. autoplay=1“src”속성의 끝에 추가하십시오 . 예를 들면 다음과 같습니다.

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>


답변

2018 년 4 월부터 Google은 자동 재생 정책 을 일부 변경했습니다 . 따라서 다음과 같이해야합니다.

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>


답변

2018 년 8 월 iframe 구현에 대한 실제 예를 찾지 못했습니다. 다른 질문은 Chrome에만 관련이 있었으며 조금만 버렸습니다.

mute=1Chrome에서 자동 재생하려면 소리를 소거해야합니다 . FF와 IE는 autoplay=1매개 변수로 사용 하면 정상적으로 작동하는 것 같습니다 .

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>


답변

자동 재생이 포함 된 YouTube 동영상을 포함하고 클립 끝에 추천 동영상이없는 방법에 대한 2014 iframe 삽입

rel=0&amp;autoplay 

아래 예 :.

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>


답변

iframe src의 끝에 &enablejsapi=1js API를 비디오에 사용할 수 있도록 추가

그런 다음 jquery를 사용하십시오.

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

문서에서 비디오를 자동으로 재생해야합니다.

클릭 기능 내에서 이것을 사용하여 다른 요소를 클릭하여 비디오를 시작할 수도 있습니다.

더 중요한 것은 모바일 장치에서 비디오를 자동 시작할 수 없으므로 사용자는 비디오 플레이어를 클릭해야 비디오를 시작할 수 있습니다

편집 : 나는 실제로 100 % 확신하지 못합니다 .YouTube가 여전히 비디오를로드 할 수 있기 때문에 iframe이 준비되었습니다. 실제로 클릭 기능 내 에서이 기능을 사용하고 있습니다.

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});


답변

IFRAME 및 OBJECT 임베드에 사용할 수 있는 플래그 또는 매개 변수는 여기에 문서화되어 있습니다. 어떤 매개 변수가 어떤 플레이어와 작동하는지에 대한 세부 사항도 분명히 언급됩니다.

YouTube 내장 플레이어 및 플레이어 매개 변수

autoplay모든 플레이어 (AS3, AS2 및 HTML5)에서 지원하는 것을 알 수 있습니다.