From 2f44582277c45fccf4a1c08b74f3e8abb5aee75b Mon Sep 17 00:00:00 2001 From: clearlythuydoan Date: Tue, 7 Jun 2022 17:00:19 -0400 Subject: [PATCH 1/7] Update upchunk to latest (2.3.1). --- examples/with-mux-video/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-mux-video/package.json b/examples/with-mux-video/package.json index cc8509b82eaed..d0324aced5eab 100644 --- a/examples/with-mux-video/package.json +++ b/examples/with-mux-video/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "@mux/mux-node": "^2.8.0", - "@mux/upchunk": "^2.0.0", + "@mux/upchunk": "^2.3.1", "hls.js": "^0.13.2", "next": "latest", "react": "^17.0.2", From 2c453420f13dfba037854d5ae88d164dfe93721a Mon Sep 17 00:00:00 2001 From: clearlythuydoan Date: Tue, 7 Jun 2022 17:00:39 -0400 Subject: [PATCH 2/7] Add mux-player package to package.json --- examples/with-mux-video/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/with-mux-video/package.json b/examples/with-mux-video/package.json index d0324aced5eab..ed55c4f666339 100644 --- a/examples/with-mux-video/package.json +++ b/examples/with-mux-video/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "@mux/mux-node": "^2.8.0", + "@mux-elements/mux-player": "0.1.0-beta.17", "@mux/upchunk": "^2.3.1", "hls.js": "^0.13.2", "next": "latest", From ea49877411ab12a39487e903ff02094266c2dab1 Mon Sep 17 00:00:00 2001 From: clearlythuydoan Date: Tue, 7 Jun 2022 17:01:05 -0400 Subject: [PATCH 3/7] WIP: Make VideoPlayer return mux-player --- .../with-mux-video/components/video-player.js | 66 +++++++++---------- examples/with-mux-video/pages/v/[id].js | 2 +- 2 files changed, 31 insertions(+), 37 deletions(-) diff --git a/examples/with-mux-video/components/video-player.js b/examples/with-mux-video/components/video-player.js index 63d5213df05d2..3d912101365e5 100644 --- a/examples/with-mux-video/components/video-player.js +++ b/examples/with-mux-video/components/video-player.js @@ -1,49 +1,43 @@ +import '@mux-elements/mux-player'; import { useEffect, useRef } from 'react' import Hls from 'hls.js' -export default function VideoPlayer({ src, poster }) { - const videoRef = useRef(null) +export default function VideoPlayer({ src, poster, playbackId }) { + // const videoRef = useRef(null) - useEffect(() => { - const video = videoRef.current - if (!video) return + // useEffect(() => { + // const video = videoRef.current + // if (!video) return - video.controls = true - let hls + // video.controls = true + // let hls - if (video.canPlayType('application/vnd.apple.mpegurl')) { - // This will run in safari, where HLS is supported natively - video.src = src - } else if (Hls.isSupported()) { - // This will run in all other modern browsers - hls = new Hls() - hls.loadSource(src) - hls.attachMedia(video) - } else { - console.error( - 'This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API' - ) - } + // if (video.canPlayType('application/vnd.apple.mpegurl')) { + // // This will run in safari, where HLS is supported natively + // video.src = src + // } else if (Hls.isSupported()) { + // // This will run in all other modern browsers + // hls = new Hls() + // hls.loadSource(src) + // hls.attachMedia(video) + // } else { + // console.error( + // 'This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API' + // ) + // } - return () => { - if (hls) { - hls.destroy() - } - } - }, [src, videoRef]) + // return () => { + // if (hls) { + // hls.destroy() + // } + // } + // }, [src, videoRef]) return ( <> -