본문 바로가기

유튜브 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으로 해결