如何在没有用户与之交互的情况下完全停止播放视频？答案

【问题标题】：How to absolutely stop the video from playing without the user interacting with it?如何在没有用户与之交互的情况下完全停止播放视频？
【发布时间】：2021-10-08 18:44:01
【问题描述】：

我有一个页面通过 id 加载随机获取的视频，经过延迟（比如说 5 秒）后，它会将我重定向到另一个页面。这个“其他页面”也做同样的事情并加载视频，但来自不同的播放列表，然后将用户重定向回第一页，依此类推。问题在于，在第二次和所有其他重定向中，页面加载了一个新视频，但不会阻止播放前一个视频。感觉就像我在这一点上尝试了一切：我尝试在视频上使用 .pause() 方法，我尝试在重定向之前用空 div 替换视频，使用来自 url 的参数加载视频并实现上下文 api （反应）重新排列一组预加载的视频并只一个一个地显示它们，我非常感谢您的帮助。索引页：

function Index(props) {
 const items = usePlaylist('RDMM', 'AIzaSyCkhQc1Gu6kmb6pYcfArYo75WXgSs_5PFw');
 const { setItems, setCount, count } = useContext(PlaylistContext);
 const [itemID, setItemID] = useState([]);

 useEffect(() => {
 if (items) {
 items.forEach((obj) => {
 const id = obj.snippet.resourceId.videoId;
 setItemID((prev) => {
 return [...prev, id];
        });
      });
    }
  }, [items]);

 const shuffledArray = itemID.sort((a, b) => 0.5 - Math.random());
 setItems(shuffledArray);
 setCount(0);

 const playLink = shuffledArray ? (
 <Link to={`/play/${shuffledArray[count]}`}>caramel</Link>
  ) : (
 <div></div>
  );
 return <div>{playLink}</div>;
}

用户最初被重定向到的第一页：

function Player(props) {
 const player = new YouTubeToHtml5({
 autoplay: false,
 withAudio: true,
  });

 setTimeout(() => {
 player.load();
  }, 0);

 const { currentVid, setCurrentVid } = useContext(PlaylistContext);
 const history = useHistory();
 const videoRef = useRef(null);

 const { src } = useParams();
 console.log(videoRef);
 useEffect(() => {
 if (videoRef) {
 console.log(videoRef.current);
 console.log(videoRef.current.pause);
 setCurrentVid(videoRef.current);
 videoRef.current.pause();
 console.log('paused');
    }
  }, [videoRef]);
 setTimeout(() => {
 videoRef.current?.pause();
 history.push('/intermission');
  }, 5 * 1000);

 return (
 <>
 <Video ref={videoRef} id={src} />
 </>
  );
}

第二个播放器页面：

function Player(props) {
 var player = new YouTubeToHtml5({
 autoload: true,
 withAudio: true,
  });
 setTimeout(() => {
 player.load();
  }, 0);

 const history = useHistory();
 const { currentVid } = useContext(PlaylistContext);

 useEffect(() => {
 if (currentVid) {
 setTimeout(() => {
 console.log('ran stop');
 console.log(currentVid);
 currentVid.pause();
      }, 100);
    }
  }, [currentVid]);
 const intermission = setTimeout(() => {
 // history.push('/player');
 console.log('pushed');
  }, 15 * 1000);
 return (
 <>
 <Video id='BV7RkEL6oRc' />
 </>
  );
}

【问题讨论】：

我有类似的情况，对我来说，打电话给pause() 并将currentTime 设置为零有效。确保您的代码在您导航到其他页面时运行。
我发现了问题所在，我在组件内部设置了导致它重新渲染的上下文，我通过使用 localStorage 设置 count 并删除后来实现的 setMute 来修复它使视频静音的功能。每次更新组件时，它还会设置一个新的超时，这导致它不断地重新运行回调函数并基本上导致无限循环。

标签： javascript reactjs video youtube-api html5-video

【解决方案1】：

我发现了问题所在，我在组件内部设置了导致它重新呈现的上下文，我通过使用 localStorage 设置计数并删除后来实现的使视频静音的 setMute 函数来修复它。每次更新组件时，它还会设置一个新的超时，这导致它不断地重新运行回调函数并基本上导致无限循环。

【讨论】：