반응형 Javascript11 🍟Hls 콘텐츠 변경 감시 현재 Hls를 사용하는 도중 컨텐츠가 바뀌면 화면에 보여지는 정보가 바뀌어 하는 서비스를 제공하고있다. 근데 현재 interval으로 API를 호출하기 때문에 서버에 부담이 가고 있어서, 이번에 Hls에서 컨텐츠 변경감지 하는 법에 대해 알아보았다. 🥙 Hls.js에서의 변경 감지 🦴 Hls.js를 지원하는 경우 만약 Hls.js를 사용할 수 있는 상황이라면 아래 처럼, FRAG_CHANGED 이벤트가 트리거가 될때 , "DIS" 가 포함 되면 컨텐츠가 변경된것으로 감지가 된다. Hls에서 EXT-X-DISCONTINUITY은 컨텐츠 내용이 변경될때마다 발견되는 태그이다. 아래는 Hls.js사용할 수 있는 경우에 대한 코드이다. 현재는 배열의 길이로 체크를 했지만, 정확하게 할려면 "DIS"가 포함되면 .. 2023. 12. 4. navigator.mediaSession 🧸 navigator.mediaSession navigator.mediaSession는 웹에서 현재 재생중인 오디오,비디오의 정보 및 컨트로를 가능하게 해주는 Web API 이다. 🛀🏼 navigator.mediaSession 적용 if ("mediaSession" in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: "Podcast Episode Title", artist: "Podcast Host", album: "Podcast Name", artwork: [{ src: "https://www.aplayz.co.kr/media/images/ev_main_con01_logo.png" }], }); } 📫 문제를 겪었던 .. 2023. 7. 27. 🦘비디오 자동재생 실행시키기 🐅 비디오 정책 크롬이나 사파리등 사용자의 액션없이 비디오를 자동재생 시킬 수는 없다. 다만 자동재생이 필요한 경우 음소거 처리하면 자동실행이 가능하다 그러나 현재 서비스에서는 항상 자동재생을 원하였다. 다만 항상 자동재생을 할 수 없다고 전달하였고, 자동재생이 안될 경우 alert을 띄어주기로 하였다 🦬 자동재생 시도 여전히 사용자 액션없이는 자동재생이 거의불가능 하지만 시도 할 수 있는 방법이 존재한다. 3회에 걸쳐 강제로 play를 하는것이며, 안될경우 alert으로 사용자가 재생버튼을 누르도록 유도한다. 🐘 자동재생 시도 - script 일단 video retry를 Promise 형태로 return 한다. /* promise retry video*/ const videoPromiseRetry = .. 2023. 7. 2. Hls.js 사용 📺 HLS(Http Live Streaming) HLS(HTTP 라이브 스트리밍)은 가장 널리 사용되는 비디오 스트리밍 프로토콜입니다. HTTP "라이브" 스트리밍이라 불리지만 주문형 스트리밍이자 동시에 라이브 스트리밍입니다. HLS는 비디오 파일을 다운로드할 수 있는 HTTP 파일 조각으로 나누고 HTTP 프로토콜을 이용하여 전송합니다. 클라이언트 장치는 이러한 HTTP 파일을 로드한 후 비디오로 재생합니다. 🔋 Hls.js Hls.js는 http live streaming을 구현하는 javascript 라이브러리입니다. ios/safari 같은 경우 빌트인이 되어있기때문에 지원하지는 않고, 다른 브라우저에서는 Hls.js를 통해서 스트리밍이 가능합니다. 💰 Hls.js 라이브러리 사용 cdn 방식으로.. 2023. 6. 14. 이전 1 2 3 다음 반응형
