Обновление элемента видео src различными потоками через URL-адрес BLOB-объекта - PullRequest
Новая
       36

Обновление элемента видео src различными потоками через URL-адрес BLOB-объекта

0 голосов
/ 08 мая 2019

Мой компонент реагирования 'VideoPlayer' не обновляет свой атрибут src при изменении реквизита.

Каждый раз, когда getUrlStreamForMostRecentMP4OnDb () вызывается, создается новый объект Url blob. Этот объект передает самое последнее видео, добавленное в базу данных. Независимо от того, какое последнее видео в базе данных является элементом видео, оно всегда воспроизводит одно и то же исходное видео.

App.js 

import React, { Component } from "react";
import VideoPlayer from "./VideoPlayer";


export default class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.getUrlStreamForMostRecentMP4OnDb = this.getUrlStreamForMostRecentMP4OnDb.bind(
      this
    );

    this.state = {
      playerSource: null,
    };
  }


  async getUrlStreamForMostRecentMP4OnDb() {
    fetch("http://localhost:4000/ytdl/streamMP4")
      .then(re => re.blob())
      .then(blob => URL.createObjectURL(blob))
      .then(url => {
        this.setState({ playerSource: url });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.getUrlStreamForMostRecentMP4OnDb}>
          Get url stream for most recent mp4 from db.
        </button>
        {this.state.playerSource ? (
          <VideoPlayer
            key={this.state.playerSource}
            playerSource={this.state.playerSource}
          />
        ) : (
          <div />
        )}
      </div>
    );
  }
}

VideoPlayer.js 

import React, { Component } from "react";

export default class VideoPlayer extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      <div>
        <video
          id="video"
          width={300}
          ref="player"
          muted={true}
          autoPlay={true}
          loop
          crossOrigin="anonymous"
          src={this.props.playerSource}
        >
        </video>
      </div>
    );
  }
}
...