홈페이지 기능 수정 실패 내용
오후에 수련원 사무실에 나가 홈페이지 비디오 플레이어의 기능을 수정하였다. 100% 만족하는 결과를 만들지는 못했지만 어느 정도 스스로 수긍할 정도로 수정을 하고 집에 돌아와 다시 테스트를 해보니 문제가 많다. 특히나 가로로 찍힌 영상은 문제가 없으나 세로로 찍힌 영상은 홈페이지 틀이 깨진 것처럼 보인다.
이번에 넣으려고 했던 기능은 영상이 플레이가 되지 않을 시 영상 중간에 플레이 버튼을 띄우는 작업이었는데, 이것이 비디오 객체로 전체화면을 띄우면 플레이 버튼이 보이지 않고 특정 키로 toggle을 할 수 없는 문제가 생겨 먼저 브라우저를 전체화면으로 만들고 CSS로 비디오를 풀화면으로 만들었는데 이렇게 하면 전체화면 상에서 영상이 멈추면 플레이 버튼 이미지가 잘 보인다.
# 정리
장점으로는
1. 플레이 버튼 이미지를 전체화면 상태에서도 이용할 수 있다.
2. 키보드 f 키를 이용하거나 Enter 키를 이용하여 토글을 할 수 있었다.
단점으로는
1. 자동 연속 재생할 때 순간적으로 영상 목록이 보이고 다시 영상이 플레이 된다.
2. 전체 화면에서 ESC키를 막거나 KeyUp이나 KeyDown 이벤트를 줄 수 없다. 보안상 막아놓았다는 글을 보았다.
내일 일요일나, 월요일에 다시 나가면 원래 버전으로 돌아가야 겠다.
182.212.105.70 / 2018-04-07 18:43:17 작성
영상 비율이 세로가 긴 것은 전체화면시 하단이 잘리는 문제가 있었는데, 썸네일 이미지로 가로 세로 화면 비율을 알아내고 그 비율로 전체화면시 문제를 해결하였다.
세로가 긴 영상을 세로 비율로 맞춰서 설정하면 가로폭이 상대적으로 줄어들기 때문에 가운데로 영상을 맞추면 홈페이지 메뉴가 보여 이쁘지가 않다.
div를 배경으로 만드는 시도를 해봤지만 잘 안된다.
지금 가지고 있는 한 아이디어는 소스가 없는 video 객체를 하나 더 만들어 전체 화면으로 만들어 z-index로 배경으로 깔고 레이어처럼 하면 어떨까 고려중인데 잘 될지 모르겠다.
182.212.105.70 / 2018-04-08 11:01:59 작성
div, video 객체로 배경만드는 것이 잘 안된다.
뭔가 방법이 있을 듯 한데.. 아주 잘못된 방법으로 가고 있는지도 모르겠다. 어쨌든 이런 저런 시도를 해보자!
182.212.105.70 / 2018-04-08 14:37:42 작성
div로 배경 만드는 것은 잘 된다.
테스트를 할 시 배경이 투명하여서 안되는 것처럼 보였다.
배경색을 black으로 만드니 아주 잘 된다.
z-index는 style의 position이 적용된 곳에서만 된다는 글을 보았다.
테스트를 해보니 그런 것 같다.
182.212.105.70 / 2018-04-08 14:56:00 작성
가로/세로 구분해 주지 않고
가로 100%
세로 100%
해주면 자동으로 가운데 정렬이 되는 것 같다.
모든 테스트를 마친 것이 아니므로 정확히 알 수는 없다.
이제 문제는 ESC키를 눌렀을 때의 문제를 처리하자!
아이디어: 브라우저 리사이즈를 감지하여 이벤트를 발생시키면 되지 안을까?
182.212.105.70 / 2018-04-08 15:44:10 작성
fullscreenchange를 addEventListener나 jquery로 하는 방법이 있는 듯 하나 이벤트가 발생하지 않아, jquery resize를 이용하여 처리 하였다. 잘 작동하니 흐뭇하다.
182.212.105.70 / 2018-04-08 16:21:31 작성
하하하하, 리눅스를 사용하고 있는데 크롬에서는 잘 작동하길래 바로 파이어폭스에서 테스트 해보니 잘 작동하지 않는다. 어차피 거의 나 혼자 쓰는 것이고, 크롬을 메인 브라우저로 사용하고 있으니.. 오늘은 여기까지만 하련다.
고려할 문제점: resize는 브라우저 창의 크기만 살짝 변경되어도 이벤트가 발생하기 때문에 결국은 fullscreenchange를 이용하긴 해야 할 것이다.
리눅스 데스크탑 환경으로 lxde를 사용하고 있고, firefox-esr 버전을 쓰고 있는데 이놈의 파폭이 너무 느리고 무거워서 거의 사용을 자제하고 있다. 상대적으로 크롬은 날아다니는 느낌이다.
182.212.105.70 / 2018-04-08 16:30:13 작성
수정 완료!
잘 작동한다.
var browserMode = 0;
var browserResizeMode = 0;
document.addEventListener("fullscreenchange", function () {
if (browserMode && browserResizeMode) setWhenNotFull();
if (!browserResizeMode) browserResizeMode = 1;
else browserResizeMode = 0;
}, false);
document.addEventListener("mozfullscreenchange", function () {
if (browserMode && browserResizeMode) setWhenNotFull();
if (!browserResizeMode) browserResizeMode = 1;
else browserResizeMode = 0;
}, false);
document.addEventListener("webkitfullscreenchange", function () {
if (browserMode && browserResizeMode) setWhenNotFull();
if (!browserResizeMode) browserResizeMode = 1;
else browserResizeMode = 0;
}, false);
document.addEventListener("msfullscreenchange", function () {
if (browserMode && browserResizeMode) setWhenNotFull();
if (!browserResizeMode) browserResizeMode = 1;
else browserResizeMode = 0;
}, false);
182.212.105.70 / 2018-04-08 17:16:14 작성
검색을 해보니 firefox 52 버전에 문제가 많은 것 같다.
firefox 홈페이지에서 버전 59를 다운로드하여 사용하니 엄청 빠르다.
182.212.105.70 / 2018-04-09 10:33:54 작성
오늘은 영상자료실의 플레이어에 기능을 추가하였다.
전체화면시 하단에 진행바를 붙였다.
일반화면에서 사용하는 진행바를 이용하려고 하였으나 div 설정이 어려워 심플하게 전체화면시에만 사용하는 프로그레스바를 하나 더 만들어 추가하였다.
기존 progressbar는 div와 css를 사용하여 구현하였는데, 검색해보니 html5에서는 라는 태그가 있었다. 환상적이다.
music 프로그레스바도 조만간에 바꿔야 겠다.
모바일쪽도 당연히 지원하겠지만, 테스트를 먼저 해봐야 겠다.
182.226.43.150 / 2018-04-12 20:07:19 작성
음악감상실의 플레이어의 기능을 수정하였다.
1. progressbar을 기존 div, css로 구현되어 있는 것을 html5의 <progressbar>를 이용하였다.
2. help 아이콘과 그 설명을 넣었다.
3. 재생 속도를 원래 속도로 다시 돌아오는 기능을 넣었다.(단축키: z)
182.226.43.150 / 2018-04-13 16:05:52 작성
비디오 전체화면시 진행바가 사라질 때 마우스 포인터도 함께 사라지고 다시 마우스를 움직일 때 나타나게 하였다.
마우스 포인터가 사라지지 않으니 마치 마리 한 마리가 앉아 있는 듯 하여 보기가 좋지 않았기 때문이다.
182.212.105.70 / 2018-04-15 23:23:40 작성
어제(17일) php와 javascript 간에 서로 암호화/복호화 하는 기능을 만들었다.
암호화는 한 문자별로 잘래내고 그 해당하는 아스키코드를 변형하여 16진수로 만들고
복호화는 암호화의 역순으로 16진수를 10진수로만들고 원래의 아스키코드를 구해서 문자화 하는 것이다.
문제는 php와 javascript간의 한글 아스키코드가 다르다는 것이다.
아스키코드는 0 ~ 127까지만 있고, php에서 한글은 확장판으로 그 밖의 영역이며 시스템마다 다른 값을 가질 수 있다.
javascript는 내부적으로 유니코드를 사용한다.
문제 해결 방안은 php에서 한글 한 문자에 대한 유니코드값을 얻는 기능을 만들었다.
php에서 한글 한 문자는 3바이트이고, 영문자 등 아스키코드(0~ 127)는 1바이트씩 차지하는 것을 처리해야 한다.
182.212.105.70 / 2018-04-18 08:34:09 작성
