음악,동영상을 인터넷에 올리는 법-embed, href, iframe 사용-

컴자료및인터넷

음악,동영상을 인터넷에 올리는 법-embed, href, iframe 사용-

새날의 2009. 7. 16. 09:38

제목: 음악,동영상을 인터넷에 올리는 법-embed, href, iframe 사용-

(참고할만 한 링크)

1. 참고 게시물 : href 태그법,iframe 태그법

2. 동영상 관련 태그 tag법 : https://brunch.co.kr/@xhrkdl2000/43

(내용 순서)

B. embed 법 : 음악, 동영상을 인턴넷에 올리는 기본 tag 형식

C. href tag 법: [클릭버턴]눌러야 링크된 웹페이지(사이트, 게시판, 동영상) 보이기

D. iframe tag 법: [클릭버턴] 누를 필요없이 웹페이지(사이트, 게시판, 동영상) 보이기

Daum 카페 게시판이나 블로그, Tistory 블로그에서는 아래 그림에서 보이는 바와 같이,

사진이나 그림, 동영상, 외부 컨텐츠를 게시물 작성시 바로 올릴 수가 있습니다.

그러나, 어떤 (인터넷) 카페 게시판이나 블로그 게시판에서는 이러한 기능이 없어 게시판 문서 작성 중

음악이나 동영상을 바로 올릴 수 없는 경우가 있습니다.

B. embed 법: 음악, 동영상을 인턴넷에 올리는 기본 tag 형식

B-1. 기본형 <embed src="?" width=가로픽셀 height=세로픽셀>

보통 (컴퓨터) 전체 화면의 크기를 "1024 x 768" 정도로 생각하면되지만, 그림(화면)이 너무 크면 부담스럽습니다.

따라서 음악의 경우 미디어 플레이어(box) 크기를 width="300" height="45" 정도로 해주는 게 좋으며,

동영상의 경우 가로 동영상은 width=800 height=600 로 세로 동영상은 width=600 height=800 로 설정해 주는 게 좋습니다.

B2. 만능 embed 구문(추천) : 인터넷익스플로러 뿐만아니라, chrome, safari 상관없이 적용되는 tag 양식

[ 만능 embed 추천 tag ]

<br><embed width="300" height="45" id="wmedia" src="?" type="video/x-ms-asf-plugin" allownetworking="internal" volume="0" loop="-1" autostart="0" enablecontextmenu="0" showstatusbar="1" showcontrols="true" x-x-allowscriptaccess="never" invokeurls="false" enabled="true" sendplaystatechangeevents="true"><br>

설명: 음악이나 동영상을 삽입할 때 사용하는 태그는 < 로 시작하고 >로 끝나야 하며, 대소,문자 구별하지 않습니다.

? 위치에는 tag가 찾아갈 절대주소(자료의 URL주소)를 입력합니다. *절대주소 = full address(찾아가야 할 완전한 주소 )

(폭 width , 높이 height)의 순서는 바뀌어도 상관없으며, width, height 둘 다 생략되면 미디어플레이가 표시 안됩니다.

embed는 지정한 위치에 있는 자료(음악,동영상)을 불러와서 play(연주)하라는 명령어입니다

src는 source의 약자로서 자료(음악,동영상)의 URL주소입니다.

background 음악으로 자동연주 (autoplay)하려면 autostart ="1" 로 설정합니다.

autostart ="0" 또는 autostart = "false" 로 설정하면 ▷(Play 버턴) 눌러야 Play(연주) 시작됩니다.

volume="30"정도면 아주 적게 들리고 volume="70"이면 보통 , volume="0" 은 최고음입니다

<br> 한줄 삽입(줄바꾸기) 하라는 명령어입니다.

[ embed 태그에 사용되는 옵션과 속성들 ]

* embed 태그에서 옵션의 배치 순서는 바뀌어도 상관 없으며, "false" 와 "0", "true" 와 "1"은 같은 효과입니다.
        src : 동영상 파일의 경로(URL 주소)입니다.
        width : 동영상의 보여지는 미디어플레이의 폭(width)이며, 높이(height )입니다.
        autostart : 자동실행 여부를 지정합니다. autostart 옵셩을 지정하지 않으면 auplay(자동연주)되지 않습니다.

autostart ="1" 과 autostart = "true" 는 같은 의미이며, 이걸 1 또는 true로 설정하면 음악 등이 자동 Play(연주됩니다).

따라서, background(배경음악)으로 자동연주 (autoplay)하려면 autostart ="1" 로 설정합니다.

autostart ="0" 또는 autostart = "false" 로 설정하면 ▷(Play 버턴) 눌러야 Play(연주) 시작됩니다.

hspace : 그림과 문장사이의 가로 여백을 뜻하며, vspace : 그림과 문장사이의 세로 여백을 뜻합니다.

        hidden ” 미디어플레이어(박스) 숨김을 뜻합니다.  숨김 hidden= "1" 과 hidden="true" 는 같은 의미. / 숨기지 않음 "false", "0"
        loop : 반복 여부를 의미한다 => 1 : 1번연주, 3 : 3번연주, -1 : 무한반복
        volume : 볼륨 크기 => 0 : 볼륨 최대  5 : 중간 크기 볼륨 연주

embed 시작 전 또는 완료 후

<br> 는 한줄 삽입(줄바꾸기)하라는 의미

<center> </center> 는 중앙에 위치 시켜라는 명령어로 <center>를 맨 앞에 , </center> 를 맨 뒤에 기술합니다.

B-예1) 기본형: 간단하게 음악이나 동영상을 링크할 수 있습니다.

그 결과는 autostart 옵션이 없으므로 ▷(Play 버턴) 눌러야 Play(연주) 시작됩니다.

B-예2)의 결과와 동일하게 음악(동영상)이 연주(play) 실행됩니다만 반복 연주 옵션이 없으므로 1회만 play(연주)됩니다.

B-예2): 인터넷익스플로러 뿐만아니라, chrome, safari 상관없이 적용되는 tag 양식(추천)

만능 embed 구문으로 작성한 tag 예로 autostart="0" 자동 재생하지 않고 ,무한 반복하게 설정하는 예입니다.

설명: 미디어플레이어(box) width="300" height="45" 크기로 표시되며, loop="-1" 이어서 무한 반복하게 됩니다.

autostart="0"이므로 ▷ 눌러야 play(연주)합니다. 만약 autostart="1" 로 지정하면, 자동 play(연주)합니다

(결과, edit 모드 ) 미디어플레이어(box)는 width="300" height="45 크기로, ▷ 눌러야 play(연주)하며, 무한 반복하게 됩니다.

(참고로 음악듣기를 중지하려면 Esc 키를 치거나, □ (버턴 표시) 눌러 중지합니다. 단, Esc 키가 안 먹히는 곳도 있을 수 있음 )

B-예3): 만능 embed 구문으로 작성된 다른 tag 예로 autostart="0" 자동 재생하지 않고 ,반복회수 3회 지정, volmue은 "0" 즉 최대,

미디어플레이의 위치를 center에 놓이게 하며 ,미디어플레이 box 크기를 더 크게 width="400" height="80" 설정합니다.

(이 t ag 가 실행된 결과): 미디어플레이 box 가 화면 중앙에 위치 하였으며, autostart="0" 이므로 ▷(Play 버턴) 눌러야 Play(연주) 시작됩니다.

(참고로 음악듣기를 중지하려면 Esc 키를 치거나, □ 눌러 중지합니다.)

[embed 구문말고 다른 tag로 음악, 동영상이 보이게 하는 tag]

C. href tag 법: [클릭버턴]눌러야 링크된 웹페이지(사이트, 게시판, 동영상) 보이기

참고 게시물 : href 태그법,iframe 태그법

[사용형식] tag는 html 모드에서 작성되며, tag 내부의 옵션은 시작과 끝을 표시하는 형태로 짝을 맞춰 작성됩니다.

C-기본형식1 <a href="?" target=blank> xx바로가기 </a>

C-기본형식2 <a href="?" target=blank> <font color =green> <STRONG> xx바로가기 클릭</STRONG> </font> </a>

C-기본형식3 <a href="?" target=blank> <b><font color=red size=3> oo 여기를 클릭 </font></b></a>

설명: (참고로, 메일로 보낼 때도 이 tag가 적용됩니다. 즉, 메일에서도 사용할 수 있습니다.)

? 부분에 URL 주소를 대입하면 됩니다.

target=blank 를 지정하면 해당 작업을 마치면(닫기[x]), 이전 사이트로 돌아올 수 있습니다.(원위치로 돌아감)

즉, 어떤 사이트에 들어가서 작업하다 해당 사이트를 닫기[x]하거나, 동영상 그만보기 즉 닫기[x]를 하면

다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과)

만약, target=blank 를 지정하지 않으면, 해당 게시물을 닫기[x]하면 해당 작업 이전 사이트도 같이 닫히게 됩니다.

원위치로 돌아갈 수 없어 불편합니다. 따라서, (원위치로 돌아가기) target=blank 를 작성(적용)하기를 추천합니다.

<font color =green>은 [클릭버턴]의 색깔을 지정하는 것입니다. blue 나 red로 변경할 수도 있습니다.
<STRONG> 는 글자를 굵게 강조하는 tag입니다. </STRONG>는 강조 tag 설정 완료 표시입니다.

<b> <font color=red size=3> 글씨 크기 3호 적색 </font></b> 에서 size=숫자가 클수록 글씨가 커집니다.

<b> 는 bold체(굵은글씨)로 시작하라는 명령어이며 <font 색갈 지정을 시작한다는 표시이며, </font>는 색갈 설정 완료 표시,

</b> bold체(굵은글씨) 설정 완료 표시 입니다. 보통 tag 옵션은 시작과 끝을 표시하는 형태로 짝을 맞춰 작성됩니다.

만약 <b><font color=blue size=2> 글씨크기 2호 청색 </font></b> 작성하면
color= 는 blue 로 글씨 크기는 3호보다 작은 2호 크기입니다.

xx바로가기 또는 oo 여기를 클릭라고 쓴 부분은 tag되는 사이트에 대한 설명으로 사이트 이름이나 주소를 써줍니다.

Edit 모드에서 'xx바로가기 클릭' 또는 'oo 여기를 클릭' 등 작성한 내용으로 보이게 됩니다.

(C-형식 예1) HTML 모드에서

<a href="https://www.youtube.com/embed/UgwIHtwx-2U" target=blank> <STRONG> <font color =green> 파두(Fadu)-세계테마기행 바로가기 클릭</STRONG> </font> </a> 로 작성하면

(결과, edit 모드): (C-형식 예1)는 파두(Fadu)-세계테마기행 바로가기 클릭 요렇게 보입니다.

이 초록색 글씨 부분을 클릭하면, link된 동영상이나 사이트가 열립니다.

만약, 어떤 사이트에 들어가서 작업하다 해당 사이트를 닫기[x]하거나, 동열상을 그만보기 닫기[x]를 하면

다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과)

D. iframe tag 법: [클릭버턴] 누를 필요없이 웹페이지(사이트, 게시판, 동영상) 보이기

iframe tag 는 html 웹 문서 안에 또 다른 웹문서, 뮤직비디오, 동영상 등을 담을 수 있는 태그입니다.

하지만, 어떤 사이트는 바로 열리지 않을 수도 있으며, 메일로 보낼 때도 이 tag가 안 먹힙니다.

(주의: 어떤 사이트에서 iframe tag가 허용되지 않았을 경우에는 iframe tag가 실행되지 못합니다.

이럴 경우에는 앞서 사용한 href tag를 이용하면 됩니다.)

[iframe 태그 작성법] tag는 html 모드에서 작성되어야 함 .참고 게시물 : href 태그법,iframe 태그법

iframe 형식

D-형식1 <iframe src="?"> target=blank </iframe>

D-형식2 <iframe src="?" width=800 height=1000> target=blank </iframe>

D-형식3 동영상 바로 보이기 <iframe src="?" width=800 height=600> target=blank </iframe>

D-형식4-A 동영상 바로 보이기 + fullscreen 허용 tag. - 추천 tag-

<iframe src="?" width=800 height=600 frameBorder=no allowfullscreen> target=blank </iframe>

형식4-B) (size 작은)동영상 바로 보이기 + fullscreen 허용

<IFRAME src="?" frameBorder=no width=544 height=306 scrolling=no allowfullscreen="" allow="autoplay; encrypted-media"> target=blank </IFRAME>

D-형식5. 유튜브 동영상 보이기 tag
형식5-A 기본형식 <iframe width="640" height="360" src="?" frameBorder=no allowfullscreen> </iframe> - 추천 tag -
형식5-B 유튜브동영상 자동실행+무한 반복 tag
<iframe width=640 height=360 src="유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

설명: "?" 에서 ? 자리에 URL주소를 대입하면 됩니다. (단, 유튜브 자동실행,무한반복 tag용 옵션에 쓰인 ?은 그대로 둡니다)

width=800 height=1000 의 숫자는 게시물(보여 주는) 화면 크기를 지정한 것입니다.

일반적인 동영상은 세로보다 가로폭이 크므로 width=800 height=600 로 크기를 지정해줍니다.

- 화면 size을 너무 작게 지정하면 화면내용의 그림이 왜곡되고

아래쪽 slide 막대나 우측에 보이는 scroll 막대를 움직여야하므로, 이 크기가 무난할 것입니다.

target=blank 지정하면, 해당 작업을 마치면(닫기[x]하면) 이전 사이트로 돌아올 수 있습니다.(원위치로 돌아감)

만약, target=blank 를 지정하지 않으면, 해당 게시물을 닫기[x]하면 해당 작업 이전 사이트도 같이 닫히게 됩니다.

원위치로 돌아갈 수 없어 불편합니다. 따라서, (원위치로 돌아가기): target=blank 를 작성하기를 추천합니다.

하지만 target=blank 의 효과는 유트브 등 일부 사이트에서는 의미없는 경우도 있습니다.

autoplay=1 는 자동실행(Autostart) 되며, loop=1 는 무한 반복합니다.

autoplay 옵션 지정이 없으면 ▷ 눌러야 영상 시작되며, loop=숫자 지정안되면 1회만 실행 합니다.

frameBorder=no 는 영상 테두리(경계) 없이, allowfullscreen 는 fullscreen 지원한다는 의미입니다.

여기서는 인터넷 게시판에서 [클릭버턴] 없이 바로 링크된 사이트가 바로 열리게 하는 법에 중점을 두어 설명합니다.

하지만, 어떤 사이트는 바로 열리지 않을 수도 있으며 화면 속의 ▷ 표시를 눌러야 영상이 나오기도 합니다.

유트브 영상 자동실행 및 무한 반복의 경우 tag 작성 시에는

scr= "유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen (주의: 주소와 ?사이는 띄어쓰지 않고 붙여 씁니다)

이렇게 설정하면 (선전없이) 유튜브 영상이 자동 실행되며, 해당 영상이 끝나면 유튜브 광고 화면이 안나오고 지정한 영상이 반복됩니다. autoplay=0 으로 설정하면 play버턴▷ 눌러야 play되며, loop=0 으로 설정하면 1회만 play(실행)되고 종료합니다.

frameBorder=no 는 영상 테두리(경계) 없이, allowfullscreen 는 fullscreen 지원한다는 의미입니다.

여기서는 인터넷 게시판에서 [클릭버턴] 없이 바로 링크된 사이트가 바로 열리게 하는 법에 중점을 두어 설명합니다.

=============================================================================================

(D-형식 예1), (B-형식 예2),(B-형식 예3)은 게시물 href 태그법,iframe 태그법 에서 소개했으므로 생략합니다.

D-형식 예4-A) 동영상 바로 보이기 + fullscreen 허용. 작성 tag 예.

iframe 태그 사용 동영상 바로 보이기(전체화면 fullscreen 허용 tag)입니다.

<iframe src=http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=0B75CDF029F1BA1521073F4C32C0FD5447B8&outKey=V124eb70d3559f275f94f994d9e29bba102c3a7eb36cfc26adbfb994d9e29bba102c3& width=800 height=600 frameBorder=no allowfullscreen> target=blank </iframe>

(예4-A결과, edit 모드): width="800" height="600" 크기의 화면이 나옵니다만, 화면 아래 우측에 fullscreen(전체화면) 보기 화살표가 있어 이를 클릭하면 fullscreen(전체화면)으로 볼 수 있습니다. 화면이 커서 약간 부담스럽습니다.

target=blank

D-형식 예4-B) (size 작은)동영상 바로 보이기 + fullscreen 허용. - 추천 tag-

<IFRAME src="http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=0B75CDF029F1BA1521073F4C32C0FD5447B8&outKey=V124eb70d3559f275f94f994d9e29bba102c3a7eb36cfc26adbfb994d9e29bba102c3" frameBorder=no width=544 height=306 scrolling=no allowfullscreen="" allow="autoplay; encrypted-media"> target=blank </IFRAME>

target=blank

(예4-b결과, edit 모드):

이처럼 적당한 크기의 width=544 height=306 크기의 화면이 나오며, 화면 아래 우측에 fullscreen 확장 화살표시가 나옵니다.

해당 동영상이나 해당 사이트 닫기[x]하면, 다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과)

==============================================================

D-형식5 (유튜브)동영상 바로 보이기 + fullscreen 허용.

유튜브 자체에서 제공한 추천 tag는 다음과 같습니다.

하지만, 보다 간단한 아래 tag 양식을 추천합니다. target=blank 는 의미가 없어 생략합니다.

형식5-A <iframe width="640" height="360" src="?" frameBorder=no allowfullscreen> </iframe> 입니다. -추천 tag-
유튜브주소를 ? 자리에 입력합니다. target=blank 는 의미가 없어 생략합니다.

예5-A <iframe width="640" height="360" src="https://www.youtube.com/embed/UgwIHtwx-2U?ecver=2" frameBorder=no allowfullscreen > </iframe>

예5-A결과 Edit 모드): 이처럼 적당한 크기의 화면이 나오며, 화면 아래 우측에 fullscreen 확장표시 □가 나옵니다.

형식5-B 유튜브동영상 자동실행+무한 반복 HTML tag - 추천 tag-
<iframe width=640 height=360 src="유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
(주의: 주소와 ?사이는 띄어쓰지 않고 붙여 씁니다.)

?amp;autoplay=1&loop=1;playlist=유튜브 뒷주소 내용을 추가하면 자동실행, 무한반복합니다.

예5-B)

<iframe width=640 height=360 src="https://www.youtube.com/embed/UgwIHtwx-2U?amp;autoplay=1&loop=1;playlist=UgwIHtwx-2U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

형식5-B결과 Edit 모드): 동영상 화면이 autoplay="1" 로 설정되어 자동실행되며, 끝나면 loop="1" 설정되어 무한반복됩니다. 화면 아래 우측에 fullscreen 확장표시 □가 나옵니다.

(선전없이) 유튜브 영상이 자동 실행되며, 해당 영상이 끝나면 유튜브 광고 화면이 안나오고 지정한 영상이 반복됩니다.
만약, autoplay=0 으로 설정하면 play버턴▷ 눌러야 play되며, loop=0 으로 설정하면 1회만 play(실행)되고 종료합니다.

이상 href 와 iframe tag 작성법을 알아 보았습니다.

-끝-