WebSquare5 유튜브 동영상 출력하기

웹스퀘어에서 유튜브 영상을 재생하기 위해 기능을 구현하다보니 작은 시행착오가 발생해서 이를 기록해두려고 한다.

video 태그로 구현

웹스퀘어API 에서는 video 컴포넌트가 명시가 되어있어서 해당 컴포넌트를 사용할 수 있다고 생각했으나, 아직 video 컴포넌트를 정식 지원하지 않는다고 한다. 따라서 해당 object에 직접 접근할 수 없고, $("#video1")와 같이 jQuery 방식을 이용하여 접근해야 한다.

var url = "https://youtu.be/dP0hwfPJoa4";

$("#video1").attr("src", url);

유튜브의 단축url로 구현

위와 같이 jQuery 방식으로 구현했는데도 영상이 재생되지 않았다. 찾아보니 유튜브 같은 경우는 iframe을 대신 사용해야 한다. 이 때 주의사항은 https://youtu.be/...와 같은 단축URL이 아니라 https://www.youtube.com/embed/...같은 내장URL으로 구현해야 한다. 

var url = "https://www.youtube.com/embed/dP0hwfPJoa4";

$("#video1").attr("src", url);

즉 유튜브로 영상을 재생하기 위해서는 iframe 태그를 이용하면서 내장 URL로 설정을 해야 정상적으로 재생이 된다.