아사동에 올라오는 사진에 배경음악을 깔고 싶으신 분들께 몇가지 주의 사항과 음악 삽입 요령을 알려드립니다.
가능하다면 배경음악은 사용을 자제해 주시기를 부탁드립니다.
그러나 사진 감상에 음악이 주는 영향이 있기 때문에 또는 사진과의 연관성 때문에 부득이 배경음악을 넣고자 하시는 경우에는 아래 사항을 지켜주시길 부탁드립니다.
그리고 조용하고 작품 감상에 방해가 되지 않는 곡, 연주로 선정을 해주시길 바랍니다.
유튜브의 볼륨은 해당 음악을 감상하기 위한 볼륨으로 되어 있어서 사진작품 감상을 위한 배경음악으로는 적합한 크기가 아닙니다.
오히려 작품 감상에 방해가 될수도 있습니다. 특히 자동실행으로 배경음악을 넣으신 경우는 사진을 감상하시는 분께 청취 강요가 될수도 있습니다.
자동실행을 원하시는 경우는 (좀 복잡한 방법이긴 하지만) 아래 4번 또는 5번 방법으로 볼륨이 낮게 재생되게 해주시면 감사하겠습니다.
이 방법이 어려우신 분은 아래 1번 방법으로 하셔서 사진을 감상하시는 분이 음악 재생버튼을 누르실수 있도록 해주시는 것이 좋습니다.
먼저, 재생할 음악을 Youtube에서 선정을 합니다.
예를 들어, 저는 이병우씨의 '비'라는 유튜브를 배경음악으로 사용하고자 합니다.
https://www.youtube.com/watch?v=V8kUhkh-HEg
사전 작업
1. 위의 링크에 가신후 비디오화면 아래에 있는 'Share'라는 버튼을 누른후 'Embed' 버튼을 누릅니다.
이때 나오는 HTML코드는 아래와 같습니다.
<iframe width="420" height="315" src="https://www.youtube.com/embed/V8kUhkh-HEg" frameborder="0" allowfullscreen></iframe>
이 곡의 Youtube ID가 V8kUhkh-HEg 입니다. 본인이 선택한 곡을 넣으실때는 해당 곡의 ID값만 교체하시면 됩니다.
2. Control-C 또는 Command+C로 이 HTML 코드값을 복사합니다. (복사하는 법을 모르시는 분은 이 강좌 전에 컴퓨터 강좌를 먼저 들으셔야 합니다.)
3. 아사동 홈페이지에서 해당 갤러리, 또는 게시판에 글쓰기 모드로 들어가 배경음악을 제외한 내용을 모두 입력완료합니다.
4. 내용입력 창 우측 상단의 'HTML 편집기'버튼을 눌러 HTML 수정 모드로 전환합니다.
5. 커서를 HTML코드의 최하단에 위치하고 아래 방법 중의 하나를 선택하여 배경음악에 해당하는 HTML코드를 삽입합니다.
배경음악 삽입 방법1: (추천) 간단한 방법, 음악 수동 실행, 유튜브 창 보이게 하기
a. 복사한 HTML코드를 그대로 붙여넣습니다.
<iframe width="420" height="315" src="https://www.youtube.com/embed/V8kUhkh-HEg" frameborder="0" allowfullscreen></iframe>
b. '등록'버튼을 눌러 글과 배경음악을 등록합니다.
배경음악 삽입 방법2: (비추천) 간단한 방법, 음악 자동 실행, 유튜브 창 보이게 하기
a. 복사한 HTML코드를 그대로 붙여넣습니다.
<iframe width="420" height="315" src="https://www.youtube.com/embed/V8kUhkh-HEg" frameborder="0" allowfullscreen></iframe>
b. HTML 코드에 아래와 같이 일부 코드부분을 추가합니다.
<iframe width="420" height="315" src="https://www.youtube.com/embed/V8kUhkh-HEg?autoplay=1" frameborder="0" allowfullscreen></iframe>
c. '등록'버튼을 눌러 글과 배경음악을 등록합니다.
배경음악 삽입 방법3: (비추천) 간단한 방법, 음악 자동 실행, 유튜브 창 안보이게 하기
a. 복사한 HTML코드를 그대로 붙여넣습니다.
<iframe width="420" height="315" src="https://www.youtube.com/embed/V8kUhkh-HEg" frameborder="0" allowfullscreen></iframe>
b. HTML 코드에 아래와 같이 일부 코드부분을 추가 , 수정합니다.
<iframe width="0" height="0" src="https://www.youtube.com/embed/V8kUhkh-HEg?autoplay=1" frameborder="0" allowfullscreen></iframe>
c. '등록'버튼을 눌러 글과 배경음악을 등록합니다.
배경음악 삽입 방법4: (추천) 전문 방법, 음악 자동 실행, 유튜브 창 보이게 하기, 재생 볼륨 낮추기
a. 아래 코드를 복사해 등록할 글 하단에 붙여 넣습니다.
<!-- 1. The < iframe > (and video player) will replace this < div > tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'V8kUhkh-HEg',
playerVars: { 'autoplay': 1, 'controls': 2, 'autohide':1, 'playlist': 'V8kUhkh-HEg', 'loop': 1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(30);
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
b. '등록'버튼을 눌러 글과 배경음악을 등록합니다.
배경음악 삽입 방법5: (추천) 전문 방법, 음악 자동 실행, 유튜브 창 안보이게 하기, 재생 볼륨 낮추기
a. 아래 HTML코드를 복사해 등록할 글 하단에 붙여 넣습니다.
<!-- 1. The < iframe > (and video player) will replace this < div > tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '0',
width: '0',
videoId: 'V8kUhkh-HEg',
playerVars: { 'autoplay': 1, 'controls': 2, 'autohide':1, 'playlist': 'V8kUhkh-HEg', 'loop': 1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(30);
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
b. '등록'버튼을 눌러 글과 배경음악을 등록합니다.