https://github.com/Blgada12/youtubePlayer 주인장이 제작한 소스코드 이다.이번 커밋의 요약은 스타일 변경점이 많이 생겼다. 크롬, 사파리 관련 호환 문제가 해결되었다(파이어폭스는 안됨) 이제 단체 프로젝트에 사용되는 식으로 넘어가 마지막이 되게 되었다.

https://github.com/Blgada12/youtubePlayer 주인장이 제작한 소스코드 이다. 이전에는 상당히 간단하게 정리했지만 이번엔 기술구현된것이 많아서 하나하나 로직을 써보려 한다. 전체화면 구현 : 자바스크립트 전체화면 코드를 사용하였다.(구글링 하면 다 나옴)이것을 활용해 유튜브iframe 과 커스텀 플레이어를 묶은 div하나를 전체화면 화 시키는데 성공. 하지만 유동적으로 크기를 바꿔주기 위해선 화면 크기가 필요했음그래서 screen.width, screen.height 활용 나머지는 간단한 css 정렬로 구현소스코드는 맨 위에 있듯이 github에 올라가 있다.

화질 변경이 추가되었습니다. 화질 정보를 받아서 input select option을 실시간으로 만들고, 123456789101112if(quals != player.getAvailableQualityLevels()) { if(player.getAvailableQualityLevels().length != 0) { quals = player.getAvailableQualityLevels() put = "" for(i = 0;i

이번엔 플레이어와 음소거를 구현해보았다. 플레이어는 단순하게 input 태그의 seeksilder을 사용함.마우스 클릭중에 움직이면 미 버퍼링 상태로 동영상 탐색마우스 클릭이 떼지면 마지막 수치를 반영하여 버퍼링을 하게 구현하였다. 12345678910111213141516171819202122232425 var seeksliderprog = document.getElementById("seeksliderprog"); seeksliderprog.value = 0; seeksliderprog.max = player.getDuration(); seeksliderprog.addEventListener('mousemove', function() { if (playerclick) { player.seekTo(se..

오디오 조절 관련 코드 123456 var seekslider = document.getElementById("seekslider"); seekslider.value = 50; seekslider.addEventListener('mousemove', function() { player.setVolume(seekslider.value); console.log("volume : " + seekslider.value) });Colored by Color Scriptercs 앞 뒤 15초 조절 코드 123456789 var plus15 = document.getElementById("plus_15"); plus15.addEventListener("click", function() { player.seekTo(p..

플레이어 객체 생성 123456789101112131415player = new YT.Player('player', { height: '390', width: '640', videoId: youtubeId, playerVars: { autoplay: 0, controls: 0, disablekb: 1, showinfo: 1, modestbranding: 0, }, events: { 'onReady': onPlayerReady } });cs 로딩 완료 되어 onReady가 호출되면 실행되는 함수1234567891011function onPlayerReady(event) { player.setVolume(0); var playButton = document.getElementById("play-button"..