리액트를 사용하여 HTML5 비디오의 소스 URL 업데이트

리액트를 사용하여 HTML5 비디오의 소스 URL 업데이트

HTML5 비디오 요소의 소스 태그를 업데이트하여 버튼을 클릭하면 재생 중인 모든 것이 새 비디오로 전환되도록 합니다.

소품을 통해 제공되는 소스 URL과 함께 HTML5 비디오 요소를 반환하는 Clip 컴포넌트가 있습니다.

function Clip(props) {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={props.url} />
    </video>
  )
}

Movie 컴포넌트도 있습니다.Movie 컴포넌트에는 여러 개의 URL이 포함되어 있으며, 각 URL은 무비의 한 섹션에 대응합니다.또한 현재 재생 중인 섹션을 기억하여 반복기처럼 작동하는 위치 속성도 포함됩니다.

class Movie extends Component {
  constructor() {
    super();
    this.state = {
      sections: [
        'https://my-bucket.s3.amazonaws.com/vid1.mp4',
        'https://my-bucket.s3.amazonaws.com/vid2.mp4'
      ],
      position: 0
    };
  }
  render() {
    const sections = this.state.sections
    const position = this.state.position

    return (
      <div>
        {position}
        <Clip url={sections[position]} />
        <button onClick={() => this.updatePosition()}>Next</button>
      </div>
    )
  }
  updatePosition() {
    const position = this.state.position + 1;
    this.setState({ position: position });
  }
}

Movie 컴포넌트는 Clip 컴포넌트와 "Next" 버튼을 렌더링합니다.[Next] 버튼을 클릭하면 위치 속성을 업데이트하고 섹션의 다음 URL을 사용하여 HTML5 비디오 요소를 다시 렌더링합니다.

현시점에서는, HTML5 비디오 소스 태그가 업데이트 되고 있습니다만, 그 요소는 이전 URL로부터의 비디오를 재생하고 있습니다.비디오 요소를 리셋 하는 방법을 가르쳐 주실 수 있습니까?

업데이트: JSFiddle을 만들었습니다.여기서 보실 수 있습니다.

업데이트 2: 비디오 요소의 src 속성을 업데이트하면 작동합니다.

빠르고 더티한 서버:를 추가합니다.key을 지지하다.<Clip>또는<video>예:

function Clip({ url }) {
  return (
    <video key={url}>
      <source src={url} />
    </video>
  );
}

---

권장 awnser:트리거 aload예를 들어 다음과 같은 새로운 URL이 있을 때마다 비디오 요소에 대한 이벤트를 표시합니다.

function Clip({ url }) {
  const videoRef = useRef();

  useEffect(() => {    
    videoRef.current?.load();
  }, [url]);

  return (
    <video ref={videoRef}>
      <source src={url} />
    </video>
  );
}

---

설명:비디오는 처음에 변경되지 않습니다.왜냐하면 기본적으로 비디오는<source>엘리먼트와 리액트는<video>변경되지 않은 상태로 유지해야 합니다.따라서 DOM에서 업데이트되지 않고 새로운 기능을 트리거하지 않습니다.load이벤트입니다.새로운load이벤트가 트리거되어야 합니다.<video>.

지저분한 답변은 효과가 있습니다.왜냐하면keyReact는 그것이 완전히 새로운 요소라는 것을 알고 있습니다.그런 다음 DOM에 새로운 요소를 생성하여 마운트 시 자체 로드 이벤트가 트리거됩니다.

의 src 변경<source />어떤 이유에선지 비디오가 바뀌지 않는 것 같아요이건 반작용적인 문제가 아닌 것 같아.아마 어떻게<source />효과가 있어. 아마 네가 전화해야 할 것 같아..load()다시 한 번 들렸다.하지만 요소 자체에 직접 설정하는 것이 더 쉽습니다.

상위 답변에 대한 코멘트를 참조하십시오: javascript를 사용하여 동영상의 소스를 동적으로 변경할 수 있습니까?

설정할 수 .src「 」의 「 」의 「 」

function Clip(props) {
  return (
    <video width="320" height="240" src={props.url} controls autoPlay>
    </video>
  )
}

소스 태그가 아닌 비디오 태그의 src 속성에 URL 바인딩

<video autoplay loop playsinline="true" webkit-timeinline="true" [src]="videoSrc" type="video/mp4">

번째 를 추가합니다.
코드 ★★★★★★★★★★★★★★」

{isMobile ? (
            <video
              autoPlay={true}
              loop
              className="moviles"
              muted
              playsInline
              poster="/totto/kids.png"
            >
              <source src="/totto/losmoviles.webm"></source>
              <source src="/totto/losmoviles.mp4"></source>
            </video>
          ) : (
            <div>
              <video
                autoPlay={true}
                loop
                className="moviles2"
                muted
                playsInline
                poster="/totto/portada.jpg"
              >
                <source src="/totto/moviles.webm"></source>
                <source src="/totto/moviles.mp4"></source>
              </video>
            </div>
          )}

다음과 같은 키 속성을 사용할 수 있습니다.

<video key={videoUrl} autoPlay width="100%">
  <source src={videoUrl} type="video/mp4"></source>
</video>

비디오의 키 속성이 변경되면 비디오 컴포넌트가 다시 마운트됩니다.

언급URL : https://stackoverflow.com/questions/41303012/updating-source-url-on-html5-video-with-react