본문 바로가기

youtube api 사용해서 youtube hd 재생




<iframe id="player" src="https://www.youtube.com/embed/s4oO-CWTFV4?enablejsapi=1&amp;autoplay=1&#10;&amp;controls=1&amp;modestbranding=1&amp;showinfo=0&amp;rel=0&#10;&amp;theme=light&amp;iv_load_policy=3" frameborder="0" allowfullscreen="1" width="853" height="480">
</iframe>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady(){player = new YT.Player('player',{events:{'onReady': onPlayerReady}});}
function onPlayerReady(event){event.target.setPlaybackQuality('hd1080');}
</script>





홈페이지 완전 이사!

 

그동안 카페를 개설해야 하는지,

그동안 조금씩 자료를 옮겨놓은 티스토리리나 블로그로 해야 하는지....

고민도 했지만,그동안 홈페이지 내용이 유튜브의 동영상이나 퍼온 동영상 뿐이라는 결론이다.

 

예전에 유튜브가 지금처럼,고화질의 동영상을 서비스 하기전에

미디어 서버를 운영하며 만든 영상들이 그때는 그 시절의 인터넷 속도에 최적화된 영상이지만,

지금은 저화질의 영상이라 쓴 웃음이 나올수 밖에 없다.....하지만

그래도 긴 시간속에 지나온 과정이고 추억이라는 생각과 더불어 나의 삶과 같은 마음에

예전 영상을 간직하고 있는것인가 보다.

 

내 자신이 커뮤니티를 즐기고 타인과의 댓글에 성실하면

카페를 개설해야겠지만 ....아무래도 그런것 같지 않다는 생각에

블로그나 만족하고 유지해야겠다는 결론이다.....

 

주로 영상시에 애착을 느끼고 있기에 유튜브에 매진하고,

가끔씩 일상에서 내가 간직하고 보관해야할 여러가지중에 일부를

남기는 홈페이지를 생각하고 있다.

유튜브 Hd 동영상 재생

홈페이지의 유튜브 동영상 HD 자동 재생때문에 며칠 애를 먹었다.

필자의 홈페이지 본문 넓이는 820px로 고정 되어 있다.


사이드바가 밑에 있는 반응형 홈페이지라 1280px 넓이의 동영상도

820px의 넓이안에 동영상으로 표현된다.물론 본문 넓이를 1280px로 바꾸고,

유튜브 동영상의 넓이를 1280px로 하면, 유튜브 동영상은  HD 자동 재생이 된다.


간단한 문제이지만,

티스토리의 본 홈페이지에 적용된 스킨은 사이드바가 옆에 없는 스킨이라  

본문 넓이를 1280px로 바꾸면,너무나 썰렁하고 마음에 안드는 모양이다.

그래서 유튜브 동영상 소스를 바꾸어 하는 방향으로 바꾸었다.

 

유튜브 공유주소

<iframe width="640" height="360" src="https://www.youtube.com/embed/공유주소?rel=0" frameborder="0" allowfullscreen=""></iframe>


이것을 


<iframe width="640" height="360" src="https://www.youtube.com/v/공유주소?rel=0&vq=hd720" frameborder="0" allowfullscreen=""></iframe>

 로 바꾸면


Pc웹에서는 잘 되었다.

문제는 이것이 모바일웹에서는 동영상 재생이 되지를 않고 공유주소가 다운로드가 되는 현상이 생긴다

.

웹에서는 반응형을 쓰고 ,모바일에서는 티스토리의 모바일웹을 쓰면,

모바일 웹에서는 유튜브 동영상을 모바일에 맞게 변형되기에 

Pc에서는 HD로 모바일에서는 모바일에 맞게 되는것을 알수 있었다.


필자의 홈페이지는 영상시란에 는 두개의 유튜브의 동영상이 등록 된 경우가 있다.

티스토리의 모바일 웹이 넓이와 높이를 달리한 동영상을 모바일에서는 


강제로 같은 크기로 리사이즈 되는 소스가 적용되어 있어 그런지,원치 않는 모양으로 등록이 된다.


영상과 음원 영상이 같은 크기의 모양이니 영 마음에 들지 않는 모습이다.


물론 갤럭시 시리즈의 기본 인터넷 익스플로에서는 두개의 동영상이 동시에 재생이 되지를 않는다.

자동재생도 되지를 않지만....


크롬 브라우저에서는 같이 재생하는것을 확인 하였다.모바일에서는 크롬 브라우저 사용하기를 권하는 문구를 넣어야 할 모양이다.


모바일을 위하여 모바일웹을 사용하고,영상은 유튜브 소스로,음원은 jwplayer소스로 사용하면 될것 같은데,

위 HD 자동 재생소스는, 결국은 필자의 홈페이지에서만 되는... 

링크를 가져갈 경우의 구독자의 모바일에서는 구현되지 않는 기현상이 되는 것이다.



다시 처음으로 돌아가서,

1280px로 동영상크기를 크게 하여 간단하게 하든지......

동영상을 보는 수요자에 귀찮더라도 

HD버튼을 누르기를 희망하는 것이다.....


추후에 HD재생소스를 발견한다든지 하면,그때 바꿀려고 하고

일단은 필자의 홈페이지는 

HD버튼을 누르기를 바라는 모양으로 

며칠동안의 고민의 결론이다.



http://lighthouse30000.tistory.com/admin/entry/post/?id=146으로 해결


홈페이지 이전했읍니다!

예전 홈페이지의 접속 로딩속도가 너무 느려져서,

개인서버라 원인이야 여러가지 있겠지만,

티스토리로 도메인 포워딩을 하게 되었읍니다.

갑작스럽게 결정을 내려

홈페이지 구성을 어떻게 해야 할까 당분간 고민을 할 처지입니다.

많은분들의 커뮤니티 사이트가 아니라서,큰 부담은 아니었지만

그동안 관심을 갖고 회원가입을 하신분과 정성스럽게 댓글을 주신 분들께 

깊은 감사를 드립니다.