时间戳

首页 > 解决方案 > React - useRef 没有暂停视频

reactjs - React - useRef 没有暂停视频

问题描述

我正在为滑块使用 react-slick。我想在幻灯片更改时停止视频。我为此使用了 useRef，但播放或暂停功能不起作用。我该如何解决这个问题？

import React, { useRef } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./styles.css";

export default function App() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const slideAfterChange = (current: number) => {
   console.log("after change", current);
   console.log("video ref", videoRef);
   videoRef.current?.pause();
 };

 const sliderSettings = {
   dots: true,
   infinite: true,
   autoplay: true,
   autoplaySpeed: 3000,
   speed: 1000,
   slidesToShow: 1,
   slidesToScroll: 1,
   afterChange: (currentSlide: number) => slideAfterChange(currentSlide)
 };

 return (
   <div className="App">
      <h1>Slider</h1>
      <Slider {...sliderSettings}>
       <div>
         <video ref={videoRef} controls width="100%" height="100%">
           <source
             src={
               "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
             }
           ></source>
         </video>
       </div>
       <div>
         <img src="http://placekitten.com/g/400/200" />
       </div>
     </Slider>
   </div>
 );
}

您可以在代码框上看到 https://codesandbox.io/s/reverent-swirles-m6bw1?file=/src/App.tsx

标签： reactjshtml5-videoreact-typescriptuse-refreact-slick

解决方案

除了 useRef，您可以向视频播放器添加一个 id，然后使用 getElementById。

const slideAfterChange = () => {
    document.getElementById("videoPlayer")?.pause();
};
...
<video id="videoPlayer" controls width="100%" height="100%">

推荐阅读