동영상재생(내고향/ 송사송희)

 

 

HTML에서

다음 동영상 자동재생은

&autoPlay=true&profileName=HIGH  를 삽입하면 됩니다.

 

예 : <iframe title='열일곱 여고생의 `서른즈음에`' width='640px' height='360px' src='http://videofarm.daum.net/controller/video/viewer/Video.html?vid=vc1b3mUdBd2mdWtWBBw2B1d&play_loc=undefined&alert=true&autoPlay=true&profileName=HIGH' frameborder='0' scrolling='no' ></iframe>

 

유튜브영상 자동재생은

 

유튜브주소끝에 ?&autoplay=1 를 삽입한다.

예 : <iframe width="640" height="480" src="//www.youtube.com/embed/RfNugYXp2dk?&autoplay=1" frameborder="0" allowfullscreen></iframe>

 

위의 두가지다 크기와 넓이를 조절해 올리면 화면이 꽉차서 좋지요.

 

일반적으로 카페는 width="720" height="460" 이면 좋고

블로그는 width="770" height="480"이 적당하답니다.

 

------------------------------------------------------ 방법 2 ----------------------------------------

 

 

유튜브 영상 소스 바꾸는게 복잡하고 잘 까먹게 돼서 검색하다가 찾은 사이트예요

되게 쉬움!

http://dmdlzaaa.ufree.kr/tool/youtubebgm.php

이 사이트예요~

주소로 들어가면 이런 사이트가 나옵니다.

                        ▼

- 사용법을 간단히 설명하면

1. 유튜브 영상 주소를 복사해서 [주소 칸]에 붙여넣기

2. 옵션 체크

3. [생성] 클릭

이렇게 하시면 돼요.

* 참고로 유튜브 영상 주소는 유튜브 사이트 주소창을 복사해도 되고 

영상 위에서 마우스 오른쪽 클릭해서 URL 복사(Copy video URL)을 선택하셔도 돼요. 메뉴가 영어로 나올때도 있음.

 

- 옵션 자세히 설명

1. 자동 재생 : 플짤처럼 자동으로 재생됨

2. 반복 재생 : 무한 반복!

3. 테마 : light(밝은색) / dark(어두운색) 두 가지가 있어요. 예쁜거 선택.

4. 버전 : 버전은 3버전이 좋아요.

5. 동영상 화질 : 360p가 보통 자동으로 재생되는 화질이고 숫자가 클수록 고화질이에요. 720p와 1080p는 HD화질(설정시 버퍼링이 있을 수도 있음) 고화질로 재생하고 싶으면 720p를 많이 설정해요.

*참고로 영상이 고화질을 지원해야 설정이 가능한데 영상이 어떤 화질을 지원하는지는 영상의 설정 버튼을 누르면 알 수 있어요.

 

6. 동영상 크기 : 동영상 원래 비율에 맞춰서 확대/축소한 고정 크기가 몇 개 있고 사용자가 직접 설정할 수도 있어요(맞춤크기). 640x360이나 853x480이 카페에서 보기 좋은 것 같음.

7. 범위 설정 : 특정 부분만 재생되도록 설정. 재생하고 싶은 부분을 초 단위로 써주면 돼요. 30초에서 1분 10초까지 재생하고 싶으면 [30]초~[70]초 이렇게.. 그냥 끝까지 재생하고 싶으면 뒷칸은 쓰지 말고 그냥 빈칸으로 두시면 됨.

8. 코드 방식 : 코드 방식은 IFRAME과 object(embed) 두 가지가 있음. IFRAME이 간단하고 짧아서 좋아요. 요즘에는 IFRAME을 많이 사용해요.

그런데 참고로 게시판 중에 IFRAME이 제한된 게시판이 있음ㅠㅠ 막이슈나 연예인사진관 등등ㅠㅠ

카페회원들의 안전을 위해 운영진이 팝업, iframe 태그를 제한 하였습니다. ←이렇게 안내되면서 영상이 안 나옴ㅠㅠ

이런 iframe이 제한된 게시판에서는 object(embed) 방식을 사용하시면 돼요.

9. 출처 표시 : 출처가 자동으로 표시되는데 안 하셔도 됨

10. 툴 알리기 : 태그 생성기 사이트 주소가 표시되는데 안 하셔도 됨

11. HTTP: 붙이기 : 유투브가 언제부턴가 소스 내에 HTTP:을 빼버렸거든요.. 다음에서는 크게 문제가 없어보이는데 다른 사이트(홈페이지)에서는 없으면 재생이 안될때가 있음ㅠㅠ 다음 카페에 올릴거라면 굳이 안 붙여도 되는데 붙여도 괜찮아요.

설정 다 했으면 [생성] 버튼 클릭~

- 다음 카페에 올리기

▲ 결과 칸을 보면 영상이 어떻게 나오는지 확인할 수 있어요.

영어(소스)로 된 빨간 네모 부분을 전체 복사합니다.

▼ 그리고 글쓰기 창으로 와서 [외부컨텐츠] 클릭~

▼ 이런 창이 떠요.

html을 선택하시고 소스입력 칸에 붙여넣기-확인

▼ 끝

글로 써서 어려워 보이는데 진짜 쉬움!

 

--------------------------------------------------------- 방법3  ------------------------------------------------

유튜브 동영상 소스 코드의 기초와 자동재생 매개 변수 삽입 위치

유튜브 동영상은 많은 매개변수를 제공합니다. 동영상 소스(무언가를 이루고 있는 것)에 대한 많은 기능을 제공한다 라는 뜻으로 이해하시면 됩니다.

밑의 예제 소스 코드는 상단중앙에 위치한 동영상의 소스 코드 입니다.

<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3" type="application/x-shockwave-flash" width="640" height="360" x-x-allowscriptaccess="always" allowfullscreen="true"></embed></object>

<iframe width="640" height="360" src="http://www.youtube.com/embed/uIxRQh4Gjq0" frameborder="0" allowfullscreen></iframe>

앞 부분이 <object ...(이하 Object 또는 오브젝트) 로 시작하는 것과 <iframe ... 으로 시작하는 것으로 나뉘어져 있는데 오브젝트로 시작하는 소스의 경우 동영상을 공유하실 때 소스 코드 항목에서 '이전 소스 코드 사용' 이란 것에 체크를 하게 되면 오브젝트로 나타나게 됩니다.

소스 코드의 경우 에디터(글 작성시에)의 우측 상단 혹은 좌측 상단을 보시면 'HTML' 옵션이 있습니다. 해당 버튼을 체크하시거나 누르시면 HTML 편집이 가능해집니다.

소스 코드가 2개로 나뉘어진 이유는 iframe 의 경우 새로운 소스 코드(HTML5) 이지만 이전 소스 코드로 만들어진 사이트(오래된 사이트 이거나 에디터가 지원하지 않는 등)의 경우 iframe 을 사용할 수 없거나, 보안상의 문제로 사용하지 않는 사이트가 있습니다. 이러한 이유로 오브젝트 소스 코드를 사용하는 경우가 생기기 때문에 2개로 나뉘어진 것입니다. 우선 오브젝트 소스 코드 부터 서술합니다.

< Object >

보다 보기 쉽게 몇 부분으로 소스 코드를 구분하겠습니다.

<object width="640" height="360">

<param name="movie" value="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3&autoplay=1"></param>

<param name="allowFullScreen" value="true"></param>

<param name="x-x-allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3&autoplay=1" type="application/x-shockwave-flash" width="640" height="360" x-x-allowscriptaccess="always" allowfullscreen="true"></embed>

</object>

자동 재생의 경우 간단하게 소스 코드에 있는 URL 두 부분에 &autoplay=1 를 넣어주시면 됩니다. 빨간색으로 강조한 부분이 추가된 것이고, 다른 매개변수(옵션)가 들어갈 곳이 바로 저곳이므로 기억해둡시다.

< iframe >

<iframe width="640" height="360" src="http://www.youtube.com/embed/uIxRQh4Gjq0?autoplay=1" frameborder="0" allowfullscreen></iframe>

iframe 역시 간단합니다. 소스 안의 URL(주소) 뒷 부분에 ?autoplay=1 을 넣어주면 됩니다.

추가 정보 - 매개변수의 종류

다음은 매개변수(옵션)의 종류 입니다. 이 옵션들은 위의 '자동재생' 매개변수(&autoplay 등의 옵션)가 들어간 곳에 넣어주시면 됩니다. 자주 쓰일 것 같은 매개변수만 서술해봤습니다.

형태는 Object 의 경우 &매개변수=값 이며, iframe 의 경우 ?매개변수=값 입니다. & 와 ? 를 혼동해선 안됩니다. 이 기호(& 와 ?)는 매개변수 앞에 반드시 붙입니다.

매개변수 조합의 경우 Object 는 &매개변수=값&매개변수=값 의 형태로 계속 조합할 수 있으며 iframe 의 경우 ?매개변수=값&매개변수=값 의 형태로 조합되므로 주의하시길 바랍니다.

ex)

Object - &autoplay=1&start=32&end87

iframe - ?autoplay=1&start=32&end=87

- 자동 재생

이 매개변수는 플레이어를 로드했을 때 자동재생의 여부를 나타냅니다. 매개변수는 autoplay 이며, 값은 다음과 같습니다.

• autoplay=0 - 플레이어를 로드했을 때 자동재생을 하지 않습니다. 기본 값 이며, 생략되 있습니다.
• autoplay=1 - 플레이어를 로드했을 때 자동재생을 합니다.
  

- 재생바의 색깔과 테마

 

이 매개변수들은 플레이어를 꾸밀 수 있습니다.

재생바의 매개변수는 color 이며, 값은 다음과 같습니다.

• color=red - 위의 그림에서 첫번째와 세번째에 있는 모습입니다. 기본 값 이며, 생략되 있습니다.
  
• color=white - 위의 그림에서 두번째와 네번째에 있는 모습입니다.
  

컨트롤바(재생 버튼, 소리 조절 버튼 등이 모인 곳)의 매개변수는 theme 이며, 값은 다음과 같습니다.

• theme=dark - 위의 그림에서 첫번째와 두번째에 있는 모습입니다. 기본 값 이며, 생략되 있습니다.
• theme=white - 위의그 림에서 세번째와 네번째에 있는 모습입니다.

- 시작과 종료

이 매개변수들은 동영상의 시작지점과 종료지점을 정할 수 있습니다.

시작지점의 매개변수는 start 이며, 값은 '자연수' 이고, 단위는 '초' 입니다.

ex)

• start=27 - 27초 부터 재생
  

종료지점의 매개변수는 end 이며, 값은 '자연수' 이고, 단위는 '초' 입니다.

ex)

• start=41&end=137 - 41초 부터 재생되며, 137초에서 끝남

- 재생 정보

이 매개변수는 동영상 상단의 정보를 가립니다. 매개변수는 showinfo 이며, 값은 다음과 같습니다.

• showinfo=0 - 동영상의 제목과 업로더와 같은 정보가 표시되지 않습니다.
• showinfo=1 - 동영상의 모든 정보를 표시합니다. 기본 값 이며, 생략되 있습니다.

- 반복 재생

이 매개변수는 동영상을 반복 재생 합니다. 매개변수는 loop 이며, 값은 다음과 같습니다.

• loop=0 - 동영상을 반복 재생 하지 않습니다. 기본 값 이며, 생략되 있습니다.
• loop=1 - 동영상을 반복 재생 합니다.

참고1 : 반복 재생의 경우 다른 매개변수와 같이 적용이 되지 않는 문제가 있습니다. 반복 재생은 playlist 매개 변수와 같이 써야하며, 구조는 playlist=VIDEO_ID 입니다. VIDEO_ID 란, http://www.youtube.com/watch?feature=player_embedded&v=uIxRQh4Gjq0 동영상 가장 끝의 11자리로 이루어진 주소입니다. 반복 재생 코드의 전체적인 모습은 playlist=VIDEO_ID&loop=1 이 됩니다.

참고2 : 해당 문제의 경우 몇가지 간단한 실험 결과 이전 소스 코드에서 적용이 됩니다.

<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3"></param><param name="allowFullScreen" value="true"></param><param name="x-x-allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=3" type="application/x-shockwave-flash" width="640" height="360" x-x-allowscriptaccess="always" allowfullscreen="true"></embed></object>

강조 표시(파란색) 부분의 코드만 따와서 다음과 같이 수정하시면 됩니다.

<embed src="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=2" type="application/x-shockwave-flash" width="640" height="360" x-x-allowscriptaccess="always" allowfullscreen="true"></embed>

최종적인 반복 재생 코드는 다음과 같습니다.

<embed src="http://www.youtube.com/v/uIxRQh4Gjq0?hl=ko_KR&version=2&loop=1" type="application/x-shockwave-flash" width="640" height="360" x-x-allowscriptaccess="always" allowfullscreen="true"></embed>

유튜브 동영상 - 공유 - 소스코드 - 이전 소스 코드 사용에 체크

그리고 ★태그 복사★

복붙하면 이렇게 길게 나옴

그러면 앞에 다 짜르고 <embed 어쩌구 부터 쭉 복사

(이유는 나도 모름ㅋ힁)

version=3를 version=2로 바꾸고 (왜그런지는 나도 모름ㅋ힁)

KR뒤에 &autoplay=1&loop=1 삽입

autoplay는 자동재생 loop는 반복재생

1은 킨거고 0은 끈거

둘중 하나만 하고싶으면 &autoplay=1만 넣던가  &loop=1만 넣던가 하세염

글쓸때 ★HTML에 체크★하고 붙여넣깅

다시 HTML 풀면 짠!ㅋ 요로케됨

-끗-

예시↓

 

 

모바일 배려 요약

1. 유튜브 동영상 - 공유 - 소스코드 - 이전 소스 코드 체크 - 태그 복사

2. 복사된 태그 중간에 <embed scr 뒤부터 쭉 복사 (그 앞에꺼는 다 짤라)

3.version=3를 version=2로 바꾸고 ko_KR 바로뒤에 &autoplay=1&loop=1 넣기

4.글쓸때 HTML에 체크하고 태그 넣으면 끗

http://tvpot.daum.net/v/nfFFJygYtg0%24