첫 입사를 하게 되었던 회사에서는 영상을 다루는 방법을 많이 배운 것 같다.
영상에 관련된 서비스를 하다 보니,
웹페이지를 구성하는데에 있어서 영상이 차지하는 비율이 꽤 컸다.
내가 담당했던 페이지에서 동영상을 다루며 알게 되었던 내용을 기억하기 위해
정리해보는 포스팅 -
📌 React에서 동영상을 다뤄봤습니다
각 태그에 대한 자세한 설명은 mozila 페이지를 첨부해놓겠습니다 :)
이번 포스팅에서는 제가 사용했던 경험을 위주로 정리해보고자 합니다.
<embed>
🧷 embed
https://developer.mozilla.org/ko/docs/Web/HTML/Element/embed
실제로 프로젝트에서 사용해본 적은 없는 태그이지만,
이번 포스팅을 작성하면서 리서치하면서 알게 된 HTML 태그!
iframe과의 차이점을 간단하게 정리하자면,
embed는 소스를 자체적으로 불러와서 재생시키는 태그로,
해당 페이지에서 직접 플레이를 하게 되지만,
iframe은 설정한 크기의 공간을 만들어 놓고,
그 안에 다른 사이트나 다른 페이지의 소스를 불러와서 보여주는 역할만 하는 것이다.
<iframe>
🧷 iframe
https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe
토이 프로젝트를 진행하고 마무리에 사용해봤던 태그다.
프로젝트가 끝나고 편지를 전달한 후에 소감(?)을 찍어 편집한 영상을 띄워놓기 위해서
유튜브 영상을 embed하는 방법을 사용하기 위해 리서치 해보니
유튜브 영상에 포함되어 있는 공유하기 버튼에 <iframe> 태그를 사용한 코드가 있었다.
친절하게 정리해보는 영상 embed 방법^^;;;
추가로 실제 내가 프로젝트에서 사용할 때에는 반응형으로 작업하느라
직접 크기를 지정하지 않고 styled-components를 사용하여
따로 min-width와 min-height를 설정했다.
<video>
🧷 video
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
프로젝트에서 설계 단계에서부터 '이걸 어떻게 구현해내게 되려나,,' 싶던 기능이 있었는데,
이미지에 마우스를 올리면 동영상이 재생되고, 이미지에서 마우스가 벗어나면 정지되는 기능이었다.
왠지 모르게 가려야할 것 같아서 픽셀처리해본,,,
잘 보이지는 않지만(?) 이미지 위에 마우스 over 하면 동영상이 재생되고
마우스 out 하면 동영상은 정지되고 다시 첫 이미지로 돌아간다.
여러가지 방법이 있겠지만, 나같은 경우엔 첫 로드시에 이미지를 보여주고
마우스를 올릴 경우에 이미지는 opacity : 0으로 처리하면서
동영상을 보여주는 방법을 사용했다.
<video ref={videoRef} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
<source src={webm_url} type="video/webm" />
<source src={mp4_url} type="video/mp4" />
</video>
<img src={img_url} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />또한 component안에서 여러개의 동영상을 보여주면서
마우스의 움직임에 따라서 재생여부를 조절해야했기 때문에 useRef를 사용했다.
⭐️ <source> 는 브라우저가 골라서 재생해요
safari의 경우에는 webm 확장자를 지원하지 않는 이슈가 있었다.
2021년부터 최신 버전에서는 지원이 된다고 하는 것 같지만
실제 서비스에서는 다방면의 사용자의 진입로를 고려해야 하기 때문에
사파리 진짜 너 너무 ㅅ
fallback으로 mp4 확장자의 비디오를 추가로 보여질 수 있도록 해야 한다.
이에 대한 좀 더 자세한 내용은 아래 링크를 참고 !
https://9to5mac.com/2021/02/18/apple-adds-webm-video-playback-support-to-safari-with-macos-big-sur-11-3/
때문에 두가지 type의 video 파일을 보여줄 수 있도록
<source>태그를 사용하면, 브라우저는 호환 가능한 타입의 비디오파일을
선택해서 보여주게 된다.
동영상을 다루는 프로젝트를 해보고 싶었는데,
새로운 기능을 다룰 수 있는 기회가 있어서 너무 좋았다.
물론 처음 받았을 때 너무너무 막막했었지만,,,
어떻게든 해결하고 나면 남는게 너무 많다.
그냥 기능을 구현하는데에 그치지 않고 이렇게 정리하면서
좀 더 많은 걸 남길 수 있도록 계속해서 정리하는 습관을 가져야지 🫥
오랜만에 올리는 포스팅이, 계속 좀 더 정확한 내용을 정리하고 싶은 마음에
오래 걸려버렸다,,
혹시 지나가다가 봤는데, 정정해야 하는 내용이 있다면 댓글로 부탁드려요 :)
