믹아의 개발일기

canvas 를 사용중인데 그리기용 캔버스랑 보여주기용 캔버스 2개를 겹쳐서 사용하고 있었다.

그래서 그리기용 캔버스가 앞에 있어야 마우스 클릭이 돼서 그릴 수 있었는데 그러다보니 

보여주기 캔버스가 그리기용 그림에 덮여버리는 현상이 있었다. js 코드를 어떻게 바꾸면 되긴 되겠지만.. 귀찮아서

다른 방법을 찾아봤다.

<canvas id="realtimeCanvas" style="position: absolute;"></canvas>
<canvas id="canvas" style="position: absolute;"></canvas>

canvas 가 클릭, 그리기용 이었고, realtimeCanvas 가 실시간으로 계속 변경되는 캔버스였다.

그런데 realtimeCanvas 가 자꾸 뒤에 그려지다 보니 

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="position: absolute;"></canvas>

순서를 바꾸니깐 canvas 에 걸어둔 클릭 이벤트가 안되더라..

그래서 찾은게

pointer-events: none;

CSS 에 적어도 좋고

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="pointer-events: none; position: absolute;"></canvas>

나는 캔버스 쪽은 그냥 간단하게 이렇게 적었다.

펑소에 html 코딩을 할 때 button 등에 데이터를 저장하기 위해

<button id="data1"> 버튼 1 </button>
<button id="data2"> 버튼 2 </button>
<button id="data3"> 버튼 3 </button>
<button id="data4"> 버튼 4 </button>

이렇게 야매로 많이 했었다. 근데 관리해야할 데이터가 좀 많아져서 찾아보니 다른 방법이 있더라.

<button id="btn1" data-test="value"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset.test);
    })
</script>

<!-- console
value
-->

data- 뒤에 원하는 변수명을 입력하고 값을 지정해준다.

그리고 DOM을 얻어와 dataset.변수명으로 구해올 수 있다.

<button id="btn1" data-test="value" data-test2="value2"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset);
    })
</script>

<!-- console
 { test : "value" , test2 : "value2" }
-->

데이터를 여러개 넣어서 구해오고 싶으면 더 추가하면 된다.

input type='file' 로 비디오 파일을 선택해서 video 태그로 재생해보자

<!-- HTML -->
<input id="file" type="file" accept="video/mp4,video/mkv, video/x-m4v,video/*">
<video id="video"></video>

input 에 type 은 file로, accept 로 비디오 확장자로 설정했다.

// Javascript

const inputFile = document.getElementById("file");
const video = document.getElementById("video");

inputFile.addEventListener("change", function(){
    const file = inputFile.files[0];
    const videourl = URL.createObjectURL(file);
    video.setAttribute("src", videourl);
    video.play();
})

일단 간단하게 이렇게 만들수 있다.

샘플 페이지

codepen.io/mika0203/pen/VwPKLLM

구글 크롬에서만 작동 확인..

a 태그에 하이퍼링크를 달았을 때

기본값은 파란색(#0000EE) , 한번 누른적이 있다면 보라색(#551A8B)으로 뜬다.

기본값을 바꿔보자.

/* style.css */

:link { color: #0000EE; }
:visited { color: #551A8B; }

link 가 링크 방문전 색이고, visited 가 방문한 적이 있는 링크다.

Google Chrome 에서 동작

비디오 태그에 controls 라는 옵션을 주면

밑에 비디오를 컨트롤하는 UI가 띄워진다.

근데 내가 필요 없는, 숨겨야 하는 버튼이 있는 경우 숨길 수 있다. (전체화면, 재생 등)

<video controls> </video>

/* style.css */

/* 숨기려는 버튼을 골라서 쓰자 */

/* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button {}

/* 일시정지, 재생 버튼 */
video::-webkit-media-controls-play-button {}

/* 재생 슬라이드..? */
video::-webkit-media-controls-timeline {}

/* 현재 진행 시간 */
video::-webkit-media-controls-current-time-display{}

/* 전체 시간 */
video::-webkit-media-controls-time-remaining-display {}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button {}

/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider {}

/* 괄호에 display: none !important; 를 추가하면된다.
 예 ) 전체화면 전환 버튼을 숨긴다. 
 다만 더블클릭으로 전체화면이 되는 기능등은 그대로고 단지 버튼만 없앤다. */

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}