반응형
웹 페이지에서 YouTube 플레이어를 동적으로 로드하고, 비디오를 재생할 수 있게 해주는 소스 코드입니다.
tag 변수에 document.createElement('script')를 사용하여 새로운 스크립트 요소를 생성하고 유튜브 플레이어 API 주소를 할당합니다.
getElementsByTagName('script')[0]를 사용하여 문서 내 첫 번째 스크립트 태그 요소를 선택하고, parentNode.insertBefore(tag, firstScriptTag)를 사용하여 새로 생성된 스크립트 요소를 이전 스크립트 요소 앞에 삽입합니다.
이렇게 하면 페이지 로드 시 새로 생성된 스크립트 요소가 DOM에 삽입되고, 해당 요소가 src 속성의 주소로부터 비디오 플레이어 API를 로드하게 됩니다. 이를 통해 웹 페이지에서 YouTube 비디오를 재생할 수 있게 됩니다.
아래코드는 input 창에 유튜브 경로가 있으면 iframe src에 삽입할 유튜브 주소를 지정합니다. 모달영역 안의 iframe 영역에 유튜브 동영상이 있는 걸 확인할 수 있습니다.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$(document).ready(function() {
$("#btn_play").click(function(){
var vod_url = $("#vod_url").val();
if(vod_url.indexOf("https://youtu.be/") != -1){
var url = vod_url.replace("https://youtu.be/", '');
$("#player").prop("src", "https://www.youtube.com/embed/" + url);
player = new YT.Player('player', {
events: {
'onReady': function (event) {
event.target.playVideo();
}
}
});
$("#modal_8").modal("show");
}else{
alert("URL 형식이 올바르지 않습니다.");
}
});
});
</script>
<body>
<div style="margin-top:30px;">
<input type="text" id="vod_url" name="vod_url" value="https://youtu.be/M7lc1UVf-VE" style="width:300px;">
<button type="button" id="btn_play" name="btn_play">재생하기</button>
</div>
<div class="modal" id="modal_8" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:530px;">
<div class="modal-content" style="border-top-color: #CCC!important;border-top: solid 1px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">동영상 미리보기</h4>
</div>
<div class="modal-body">
<iframe id="player" type="text/html" width="490" height="300" src=""></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
</body>
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 남은시간 타이머, 카운트다운 만들기 (0) | 2023.04.04 |
|---|---|
| [자바스크립트] PHP 배열 변수 스크립트에서 사용하기 (0) | 2023.03.30 |
| [자바스크립트] 입력한 문자열 Byte 체크 하고 계산하기 (onkeyup) (0) | 2023.03.17 |
| [자바스크립트] textarea 높이 자동조절 (onkeyup, onkeydown) (0) | 2023.03.08 |
| [자바스크립트] 문자열 자릿수만큼 0, 공백 채우기 (fillZero, fillSpace) (0) | 2023.01.09 |
댓글