I also landed in this same issue a few days back ago, but I found out the original way of solving this issue with the native React.JS style. Show for your scenario, lets say you want to import video locally in your project file into react app then, instead of using native HTML syntax for eg:
which for me didn't worked for me in my case for my project. So I just slightly modified the code in following manner and it worked flawlessly. You need to import the video as a certain entity in react just like how to import any other npm packages/modules for eg in you your case you need to do these slight changes:
or
this will also work well without using 꿈꾸는 개발자의 블로그React [React] <Video> 태그를 이용한 동영상 재생하기aldrn29 2022. 6. 23. 23:16 동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다! React 동영상 재생하기
* react-player라는 라이브러리도 있던데.. 나중에 알아봐야겠다! 전체 코드 1. 문제댕지용 화면을 구현하기 위해 2. 원인어떠한 static한 성질을 가지고 있는 video, images, etc는 public folder에 놓여져야 한다. 왜냐하면 public folder 같은 경우 webpack에서 처리가 되지 않기 때문에 그대로 볼 수 있기 때문이다. public 폴더 놓지 않을 때에 webpack 으로 인해 변형이 일어 수 있기 때문이다. 3. 해결어떠한 파일 url은 모두 public 폴더를 지정하기 때문에, ref. https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video 😀 시작하기에 앞서video tag를 사용하여 각 브라우저에서 제공하는 비디오 UI를 노출시킬수 있지만, 브라우저마다 다르게 보여지기도 하고, 원하는 디자인 혹은 원하는 기능을 추가하여 custom 하고 싶을때가 있습니다. 따라서 이런 요구사항들을 충족하기 위해 video 컴포넌트를 react에서 custom 하는 방법을 알아봅시다. video tag attributevideo 컴포넌트를 custom 하여 제작하기전에 어떤 attribute들이 있는지 대략 살펴보면 아래와 같습니다.
HTMLMediaElementhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement 또한 HTMLMediaElement는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스입니다. HTMLVideoElement 와 HTMLAudioElement 는 이 인터페이스를 상속하기 때문에 다양한 attribute나 메소드들을 활용할 수 있습니다. 그 중 비디오 컴포넌트 custom에 사용되는 몇가지 method나 attribute를 확인하면 아래와 같습니다.
🛠 필요한 컴포넌트 제작하기기본 브라우저에서 제공되는 video tag UI 는 모바일/데스크탑에서 아래와 같이 나오는것을 볼 수 있습니다.
그러나 서비스를 제작하다보면, 디바이스에 상관없이 동일한 UI를 보여주고 싶고, 아래 control bar를 custom 하고 싶기도 하고, 재생/정지 등의 UI를 커스텀하고 싶을때가 있습니다. 예시로 제작할 video 컴포넌트는 아래와 같습니다. 이를 위해서는 동영상 재생에 따른 시간 업데이트나, fade 애니메이션, 재생/일시정지, progress bar 이동에 따른 시간 업데이트 등등을 모두 구현해야만 합니다. 먼저, 제작할 컴포넌트의 예시 코드를 보여드리면 아래와 같습니다. 크게 1.영상 출력 부분에 해당하는 Video 컴포넌트 2.동영상 재생시간 조정, 볼륨조정 등등에 해당하는 ControlBar 컴포넌트 3.동영상 시간조절 영역에 해당하는 Progress 컴포넌트 세가지 입니다. 개별 스타일 file들은 https://github.com/Brew-Brew/react-video repo에서 확인하신후에 적용해주시면 감사하겠습니다! Video 컴포넌트
개별 상태들에 대해서 먼저 설명을 드리면, nowPlaying은 동영상 재생중인지 여부, currentTime은 현재 동영상의 재생시간, showControl은 controlbar가 visible 한지의 값입니다.
그리고 동영상과 관련한 정보들입니다. videoElement에는 동영상 ref의 요소값을 넣고, totalTime은 동영상의 총 길이를 넣습니다.
그다음은 동영상 시간 업데이트와 관련된 초기 initialize 함수입니다. 처음 컴포넌트가 mount될때 재생되도록 설정해 주었습니다. (setNowPlaying(true), observedVideoElement.play())
그 다음은 progress bar를 이동시켰을때 실행되는 함수입니다.
그 다음은 play/pause 아이콘을 클릭했을때의 함수입니다.
마지막으로는 하단 control bar의 visible과 관련된 함수입니다. 애니메이션을 주기 위해 setTimeout을 주었습니다.
ControlBar 컴포넌트기존 video tag에서 controls 옵션을 주어 보여지는 UI 영역에 해당합니다. 기본 video tag에서는 controls attribute를 true로 주면(https://www.w3schools.com/tags/att_video_controls.asp) 컨트롤바가 보이지만 실제로 이 영역에 해당하는 UI를 custom 하기 위해서는 컴포넌트를 제작해야 합니다.
controlbar 영역도 주요한 부분은 크게 두군데로 나뉠수 있는데 볼륨관련 조절 함수 부분, progress 바 조정을 위한 마우스 up/down 함수 부분입니다. 아래는 volume 관련 함수입니다.
아래는 progress바를 핸들링 하기위해 마우스를 올리고 내렸을때 실행되는 함수입니다.
아래는 분,초를 출력하기 위한 시간 출력 함수입니다.
ProgressBar 컴포넌트동영상 시간을 조절하는 progress 컴포넌트에 해당합니다. input tag를 활용해 구현했습니다.
참고하면 좋을점IOS 10+ 에서의 video 인라인 자동재생 이슈 (autoplay with inline 관련)iOS 10에서부터 WebKit은 동영상 인라인 및 자동 재생을 완화하려고 하지만, 여전히 사이트의 대역폭과 사용자의 배터리를 염두에 두고 있습니다. 따라서 절전모드에서는 자동재생이 작동하지 않습니다. 또한 자동재생이 동작하게 하기 위해서는 muted, playsinline 등이 항상 true여야 합니다. [번역] iOS를 위한 새로운 정책 Autoplaying video in WKWebView on iOS 10+ 마치며위 글에서 볼 수 있듯, video tag를 custom 하기 위해서는 많은 함수나, UI들을 직접 구현해야하는 비용이 뒤따르긴 합니다. 또한 저만의 방식으로 HTMLMediaElement 의 attribute나 method를 활용하여 custom 한 방식이기때문에 참고만 하시고, 여러가지 방식으로 구현해 보시기 바랍니다 :) 하지만 위에서 볼수 있듯 video tag도 얼마든지 개발자가 UI를 custom 할수있고, 여러가지 디바이스에 동일한 UI가 보여지게 할 수 있다고 말씀 드릴 수 있습니다 :) 감사합니다. 참고하면 좋을 링크들
|