8.0 ~ 8.6 Video tag event
video tag에 play, pause, volume, 확장, 줄이기, 시간 까지 다 있다. 태그에 다 있는데...... 따로 한 이유는 event 처리 방법을 배우는게 목적인거 같다. 처음 구현한 건 비디오를 재생 시키는거다. video tag를 찾아서 클릭을 하면 재생이 되게 하는 방법이다. 이게 button을 누르면 해당된 요소를 찾아서 이벤트를 실행 시켜주는 과정이 재밌었다. 버튼을 누르면 이벤트 발생! 함수, 태그, 이벤트 함수, 여러 가지 작용, tag 속성에 접근하는거, tag에 있는 메소드나, key를 활용하기 등 알아야할 게 많고, 생각하면서 할 게 있어서 좋았다. error가 발생하면 어디서 발생하는지 원인을 찾아서 고치고, 다시 해보고! 재밌었다. 다른 거에도 이벤트를 걸어보고 싶다. 여러 로직을 만들어보는게 좋을 것 같다.
하나 알아간 거
- 이벤트가 비디오를 크게 해서 보고 싶을 때가 있다. 그거에 대한 이벤트를 걸었는데 이벤트가 video 태그에서 직접적으로 할 수 없고, video 부모태그인 div에 requestFullscreen을 걸어줬다. 원래대로 돌아와야 하니 exitFullscreen 이벤트를 걸어줬다. 확장되면 버튼이 축소 버튼으로 바뀌면서 이벤트도 바껴야 된다. 이 과정을 생각해 보니깐. video 상세화면이 나오게 되면 videoContainer id를 찾고 있으면 이벤트들이 담긴 init 함수가 실행이 된다. 그러면 이벤트들이 대기 상태가 된다. 대기 상태에서 해당 이벤트가 발생이 되면 동작하게 되는데, 화면 확장, 축소는 각각 독립적인 함수다. 그래서 이벤트 걸어준 태그를 누르면 두개가 동시에 이벤트가 발생하게 된다. 확장버튼을 누르게 되면 축소 이벤트가 추가되고, 확장 이벤트는 제거 된다. 반대로 축소 버튼을 누르면 확장 이벤트가 생기고, 축소 이벤트는 제거된다. 이 과정이 궁금하다. 이 과정을 배우니 어려군데 사용할 수 있다. 하나 더 알 수 있었던건 크로스브라우징이 CSS만 있는게 아니고 브라우저마다 동작하게 하는 코드가 필요하다는 걸 알았다. chrome은 앞에 webkit을 붙이고, explore에는 ms를 붙이고, 등등 여러가지 방법이 있는걸 알게됐다.
갈고 닦자.