Обновление исходного URL в видео HTML5 с помощью React

Question

Я хочу обновить тег источника в элементе видео HTML5, чтобы при нажатии кнопки все воспроизводимое содержимое переключалось на новое видео.

У меня есть компонент Clip, который возвращает элемент видео HTML5 с исходным URL-адресом, предоставленным через реквизит.

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

У меня также есть компонент Movie, который содержит несколько 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". Когда нажимают кнопку "Далее", я хочу обновить атрибут позиции и повторно отобразить элемент видео HTML5, используя следующий URL из разделов.

На данный момент, когда я нажимаю кнопку Далее, тег источника видео HTML5 обновляется, но элемент продолжает воспроизведение видео с предыдущего URL. Может кто-нибудь помочь мне разобраться, как сбросить элемент видео?

Обновление: я создал JSFiddle, который вы можете увидеть здесь.

Обновление 2: обновление атрибута src в элементе video работает!

Answer 1

Изменение сроков <source /> похоже, по какой-то причине видео не переключается. Это не проблема реагирования, я не думаю. Наверное, просто как <source /> работает. Может быть, вам нужно позвонить .load() на элементе снова. Но проще установить его непосредственно на самом элементе.

См. Комментарий к главному ответу: Могу ли я использовать JavaScript для динамического изменения источника видео?

Вы можете установить src вместо этого непосредственно на элементе:

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

Answer 2

Короткий awnser: Добавить key опора для <Clip> или же <video>Например:

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

---

Long awnser: видео не изменится, потому что по сути вы изменяете только <source> элемент и Реакт понимает, что <video> должен остаться без изменений, чтобы он не обновлялся в DOM и не вызывал новый load событие для этого источника.

Чтобы убедиться не только <source> обновляется, но также <video>, добавить key поддержать его, чтобы React понимал, что это совершенно новый элемент.

Для более полного объяснения, ознакомьтесь с этой статьей о ключах в документах React:)

Answer 3

Вы можете использовать ключевой атрибут:

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

Если ключевой атрибут видео изменится, компонент видео будет перемонтирован.

Answer 4

Добавить родительский div ко второму видео
Мой код:

      {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>
          )}

Answer 5

Свяжите URL-адрес в свойстве src тега Video, а не в теге источника.

<цикл автозапуска видео без звука playsinline = "true" webkit-playsinline = "true" [src] = "videoSrc" type = "video/mp4">