mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
StevenandGitHub
4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
38 lines
942 B
JavaScript
38 lines
942 B
JavaScript
import { useEffect, useRef } from "react";
|
|
import Hls from "hls.js";
|
|
|
|
export default function VideoPlayer({ src }) {
|
|
const videoRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const video = videoRef.current;
|
|
if (!video) return;
|
|
|
|
video.controls = true;
|
|
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
|
|
const 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/docs/Web/API/Media_Source_Extensions_API",
|
|
);
|
|
}
|
|
}, [src, videoRef]);
|
|
|
|
return (
|
|
<>
|
|
<video ref={videoRef} />
|
|
<style jsx>{`
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|