From e764968a5e8079e253e7badeed6d7a9d2e8dc620 Mon Sep 17 00:00:00 2001
From: xiabaoying <xiabaoying@zhihu.com>
Date: Fri, 15 Mar 2024 17:43:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=8F=E4=BC=A0=20video=20=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=20crossorigin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/MP4Page.tsx                     | 1 +
 packages/griffith/src/components/Player.tsx | 3 +++
 packages/griffith/src/components/Video.tsx  | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
index b7564ab0..6b300689 100644
--- a/example/src/MP4Page.tsx
+++ b/example/src/MP4Page.tsx
@@ -70,6 +70,7 @@ const App = () => {
         key={query.key}
         autoplay={query.autoplay !== '0'}
         sources={'hls' in query ? hlsSources : sources}
+        crossOrigin="anonymous"
         localeConfig={{
           'zh-Hans': {
             'quality-ld': {
diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx
index 89389dc5..4b9ad92f 100644
--- a/packages/griffith/src/components/Player.tsx
+++ b/packages/griffith/src/components/Player.tsx
@@ -86,6 +86,7 @@ type InnerPlayerProps = {
   hideCover?: boolean
   noWriteDocTitle?: boolean
   layerContent?: React.ReactNode
+  crossOrigin?: string | undefined
 }
 
 // 仅供 Provider 使用的属性
@@ -143,6 +144,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
   hideCover,
   noWriteDocTitle,
   layerContent,
+  crossOrigin,
 }) => {
   const {emitEvent, subscribeAction} = useContext(InternalMessageContext)
   const {currentSrc, sources} = useContext(VideoSourceContext)
@@ -634,6 +636,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
       <div className={css(styles.video)}>
         <Video
           ref={videoRef}
+          crossOrigin={crossOrigin}
           controls={ua.isMobile && isPlaybackStarted && !hideMobileControls}
           paused={!isPlaying}
           volume={volume}
diff --git a/packages/griffith/src/components/Video.tsx b/packages/griffith/src/components/Video.tsx
index fdd7eacb..76030b78 100644
--- a/packages/griffith/src/components/Video.tsx
+++ b/packages/griffith/src/components/Video.tsx
@@ -342,6 +342,7 @@ class Video extends Component<VideoProps> {
       useMSE,
       sources,
       currentQuality,
+      crossOrigin,
     } = this.props
 
     const {VideoComponent} = selectVideo(format, useMSE)
@@ -355,6 +356,7 @@ class Video extends Component<VideoProps> {
         className={css(styles.root)}
         preload="metadata"
         playsInline
+        crossOrigin={crossOrigin}
         webkit-playsinline=""
         x-webkit-airplay="deny"
         muted={!volume}