基于Gatsby的YouTube嵌入视频仅在Safari中播放异常

跨浏览器表现 #

• Chrome、Firefox等浏览器中，视频可正常自动播放（autoplay）并循环（loop）

Safari特定问题 #

• 偶尔能正常播放数小时或在部分设备上正常，但最终会失效
• 常出现「登录以验证您不是机器人」提示，或显示播放按钮而非自动播放
• 直接打开youtube.com/embed/对应链接则播放正常

当前配置参数 #

• 视频已设置静音
• 嵌入URL已配置autoplay=1和loop=1参数

已尝试的排查措施 #

• 调整Referrer Policy：测试过strict-origin-when-cross-origin和origin-when-cross-origin
• 更新内容安全策略（CSP）

Safari控制台错误信息 #

• 出现「Unrecognized Content-Security-Policy directive 'require-trusted-types-for'」错误
• 部分播放文件间歇性加载失败，推测与自动播放异常相关

目前上述调整未解决问题，且未发现明确失效规律，寻求可行解决方案。

YouTube组件代码 #

import React, { useRef, useEffect, useState } from 'react';
import YouTube from 'react-youtube';

const createIntersectionObserver = (playerRef, options = {}) => {
  const defaultOptions = {
    // threshold: 0.1,
    rootMargin: '0px'
  };

  return new IntersectionObserver(([entry]) => {
    if (!playerRef.current) return;

    try {
      if (entry.isIntersecting) {
        playerRef.current.playVideo();
      } else {
        playerRef.current.pauseVideo();
      }
    } catch (error) {
      console.warn('Error handling intersection:', error);
    }
  }, { ...defaultOptions, ...options });
};

const handleObserverCleanup = (container, observer) => {
  if (!container || !observer) return;

  try {
    observer.unobserve(container);
    observer.disconnect();
  } catch (error) {
    console.warn('Failed to cleanup observer:', error);
  }
};

const YouTubeVideo = ({ videoId, title }) => {
  const playerRef = useRef(null);
  const containerRef = useRef(null);
  const [opts, setOpts] = useState({
    width: '100%',
    height: '100%',
    enablejsapi: 1,
    playerVars: {
      autoplay: 1,
      controls: 0,
      modestbranding: 1,
      loop: 1,
      playlist: videoId,
      mute: 1,
      rel: 0,
      showinfo: 0,
      iv_load_policy: 3,
      playsinline: 1,
      cc_load_policy: 0,
      origin: window.location.origin // Explicitly set origin here
    }
  });

  // Effect for window-dependent options
  useEffect(() => {
    setOpts(prev => ({
      ...prev,
      playerVars: {
        ...prev.playerVars,
        origin: window.location.origin,
        widget_referrer: window.location.href,
      }
    }));
  }, []);
  

  // Effect for intersection observer
  useEffect(() => {
    const container = containerRef.current;

    if (!('IntersectionObserver' in window)) {
      console.warn('IntersectionObserver not supported');
      return;
    }

    let observer;
    try {
      observer = createIntersectionObserver(playerRef);

      if (container) {
        observer.observe(container);
      }
    } catch (error) {
      console.warn('Failed to setup intersection observer:', error);
    }

    return () => handleObserverCleanup(container, observer);
  }, []);

  const onReady = (event) => {
    playerRef.current = event.target;
    event.target.playVideo();
  };

  const onStateChange = (event) => {
    // YouTube player states: -1 (unstarted), 0 (ended), 1 (playing), 2 (paused), 3 (buffering), 5 (video cued)
    if (event.data === 0) { // 0 means ended
      playerRef.current.playVideo(); // restart if ended
    }
  };

  return (
    <div ref={containerRef}>
      <YouTube
        videoId={videoId}
        title={title}
        className="video-embed-object-fit-cover youtube"
        opts={opts}
        onReady={onReady}
        onStateChange={onStateChange}
        referrerPolicy="origin-when-cross-origin"
        allowFullScreen
        playsInline
      />
    </div>
  );
};

export default YouTubeVideo;

最终渲染的iframe代码 #

<iframe src="https://www.youtube.com/embed/rnXIjl_Rzy4?autoplay=1&amp;controls=0&amp;modestbranding=1&amp;loop=1&amp;playlist=rnXIjl_Rzy4&amp;mute=1&amp;rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;playsinline=1&amp;enablejsapi=1&amp;enablejsapi=1" title="Hello, I'm Ian—a hyper-curious strategic creative operating at the intersection of digital and physical worlds, designing compelling human experiences that resonate across brand, product, and communications." width="100%" height="100%" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" referrerpolicy="origin-when-cross-origin" playsinline=""></iframe>

可行解决方案建议 #

1. 修复CSP兼容性问题
   Safari不支持require-trusted-types-for指令，需从CSP规则中移除该指令，避免触发解析错误导致资源加载异常。

2. 调整自动播放触发时机
   Safari对自动播放的限制更严格，即使视频静音，也可能需要等待页面交互后再触发播放。修改组件逻辑，监听页面首次交互事件，在用户操作后初始化播放器：

   useEffect(() => {
     const handleFirstInteraction = () => {
       if (playerRef.current) {
         playerRef.current.playVideo();
       }
       window.removeEventListener('click', handleFirstInteraction);
       window.removeEventListener('touchstart', handleFirstInteraction);
     };
   
     window.addEventListener('click', handleFirstInteraction);
     window.addEventListener('touchstart', handleFirstInteraction);
   
     return () => {
       window.removeEventListener('click', handleFirstInteraction);
       window.removeEventListener('touchstart', handleFirstInteraction);
     };
   }, []);
   

3. 优化Intersection Observer逻辑
   Safari的Intersection Observer可能存在触发延迟或异常，调整阈值参数（如设置threshold: 0.5），并增加播放前的状态检查：

   if (entry.isIntersecting && playerRef.current.getPlayerState() !== 1) {
     playerRef.current.playVideo();
   }
   

4. 移除重复的enablejsapi参数
   从iframe的src中可见enablejsapi=1重复出现，需在组件的playerVars中确保只设置一次，避免参数解析异常。

5. 优化循环播放逻辑
   虽然已配置loop=1和playlist=videoId，可在视频结束后增加延迟重试，避免立即触发播放被Safari拦截：

   const onStateChange = (event) => {
     if (event.data === 0) {
       setTimeout(() => {
         try {
           playerRef.current.playVideo();
         } catch (e) {
           console.warn('Retry play failed:', e);
         }
       }, 500);
     }
   };
   

6. 调整Referrer Policy为strict-origin
   将referrerPolicy设置为strict-origin，减少跨域请求时的信息暴露，可能避免YouTube机器人检测机制误判。

内容的提问来源于stack exchange，提问作者yellucnai