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

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

이번엔 플레이어와 음소거를 구현해보았다. 플레이어는 단순하게 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"..

변경점 1. 상단으로 가는 버튼이 생겼습니다.모바일과 태블릿 버전을 배려하였습니다. 2. 상단바의 색깔이 변경되었습니다. 3. 상단바 글씨의 가독성을 위해 폰트 색상이 변경되었습니다. 사실상 3~4일이라는 짧은 시간동안 몰두하며 개편시킨 블로그지만, 필자는 상당히 만족한다깔끔한 디자인과 블로그라는 목적을 충실히 수행하는 스킨이 참 마음에 든다. 블로그 리뉴얼 2017.7.31~2017.8.5 완

2017.8.1 진행점 1. 헤더, 푸터 색깔 추가2. 대시 스타일 변경3. 링크 스타일 변경4. 헤더 투명도 변경5. 태그 정리6. 카테고리 밑 글 갯수 정리

일정이 많~~~이 늦었지만맥os와 맥북이라는 새로운 환경에 적응을 하는 좋은 시간을 보내고이제 작업을 시작하기로 했다. 블로그 리뉴얼 2017.7.31~ 우선 블로그 리뉴얼의 기본 스킨은 LARK님의 블로그 스킨을 기반으로 만들 것이다.출처 : http://lark6.tistory.com필자가 따로 진행하고 있었던 파일은 아직 반응형에 많이 부족하여 이렇게 진행하게 되었다. 2017.7.31 진행점 1) 링크 색 변경 ->핫핑크 (시죠타카네) 2) 상단 메뉴바 변경3) 푸터 변경

blgada12.github.io/lab

업데이트 내역1. 태블릿 모드 구현 시작2. 웹페이지 파일경로 최적화3. 로그인 구현 취소 -> 자기소개 밑 연구 페이지 시작 사이트blgada12.github.io/web