Youtube -是否可以为自动播放值传递状态值(React JS)

import React, { useState } from 'react';

function VideoPlayer({ initialPreferences }) {
  const [preferences, setPreferences] = useState(initialPreferences);

  // 假设我们有一个函数来更新用户偏好设置
  const updatePreferences = (newPreferences) => {
    setPreferences(newPreferences);
  };

  return (
    <div>
      <video
        src="path_to_video.mp4"
        autoplay
        controls
        onPlay={() => {
          // 在视频播放时更新状态或执行其他操作
          console.log('Video is playing with preferences:', preferences);
        }}
      />
      <button onClick={() => updatePreferences({ volume: 0.5 })}>
        Set Volume to 50%
      </button>
    </div>
  );
}

export default VideoPlayer;

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

function VideoPlayer({ initialPreferences }) {
  const [preferences, setPreferences] = useState(initialPreferences);
  const preferencesRef = useRef(preferences);

  useEffect(() => {
    preferencesRef.current = preferences;
  }, [preferences]);

  return (
    <div>
      <video
        src="path_to_video.mp4"
        autoplay
        controls
        onPlay={() => {
          console.log('Video is playing with preferences:', preferencesRef.current);
        }}
      />
      {/* 其他组件代码 */}
    </div>
  );
}