Video angezeigt ReactJS Komponente nicht aktualisiert

Ich bin neu ReactJS (0.13.1), und ich habe eine Komponente in meinem app zur Anzeige von HTML5-video.

Es scheint zu funktionieren perfekt, aber nur für die erste Auswahl. Das video, das aktuell angezeigt wird und das spielen in der Seite ändert sich nicht, wenn Sie wechseln von einem video zum anderen (wenn this.props.video änderungen).

Sehe ich die <source src='blah.mp4' /> elements update in den Chrome-inspector, sondern die tatsächlich erbrachte video in die Seite ändert sich nicht und hält zu spielen, wenn es das schon war. Dasselbe passiert in Safari & Firefox. Alle anderen Elemente aktualisieren entsprechend gut.

Irgendwelche Ideen?

Sowieso meine Komponente unter:

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var sourceNodes = video.media.map(function(media){
        media = 'content/'+media;
        return ( <source src={media} /> )
      });
      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (<li><a className="greybutton" href={media}>{ext}</a></li>)
      });

      return (

        <div className="video-container">
          <video title={title} controls width="100%">
            {sourceNodes}
          </video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox">
              <span>Downloads:</span>
              <ul className="downloadlinks">
                {downloadNodes}
              </ul>    
            </div>
        </div>

      )
    }
  });
  module.exports = VideoView;
})();

UPDATE:

Beschreiben es anders:

Habe ich eine Liste von links mit onClick-Handler, legen Sie die Schrauben der Komponente.

Wenn ich auf ein video-link ("Video " Foo") für die erste Zeit bekomme ich

<video title="Video Foo" controls>
  <source src="video-foo.mp4"/>
  <source src="video-foo.ogv"/>
</video>

und "Video " Foo" angezeigt und abgespielt werden können.

Dann, wenn ich auf den nächsten ("Video Bar") die DOM-updates und ich bekomme

<video title="Video Bar" controls>
  <source src="video-bar.mp4"/>
  <source src="video-bar.ogv"/>
</video>

Jedoch ist es immer noch "Video " Foo", die ist sichtbar und kann gespielt werden.

Es ist wie einst der browser geladen hat, die Medien für eine <video> es ignoriert alle änderungen an der <source> Elemente.

geben Sie optional ist, ist der browser fragt den server die Bereitstellung der Datei für ein Typ ist, wenn es nicht zur Verfügung gestellt.

InformationsquelleAutor Dana | 2015-03-27

Den ich beschrieben habe, einige Ansätze für plain JavaScript hier. Auf dieser Basis habe ich Lösungen gefunden, die für Reagieren, die für mich arbeiten:

mit src Attribut auf video selbst:

var Video = React.createComponent({
  render() {
    return <video src={this.props.videoUrl} />;
  }
});

Dana ' s Antwort ist eine gute option, die Ausweitung dieser Lösung.

mit .load() call-auf-video-element:

var Video = React.createComponent({
  componentDidUpdate(_prevProps, _prevState) {
    React.findDOMNode(this.refs.video).load(); //you can add logic to check if sources have been changed
  },

  render() {
    return (
      <video ref="video">
        {this.props.sources.map(function (srcUrl, index) {
          return <source key={index} src={srcUrl} />;
        })}
      </video>
    );
  }
});

UPD:

natürlich ist es möglich, fügen Sie einzigartige key Attribut für <video> - tag (zum Beispiel basierend auf Ihren Quellen), so wenn in den Quellen wird sich ändern, es wird geändert. Aber es wird dazu führen <video> neu gerendert, völlig, und es kann dazu führen, dass einige UI blinkt.

var Video = React.createComponent({
  render() {
    return (
      <video key={this.props.videoId}>
        {this.props.sources.map(function (srcUrl, index) {
          return <source key={index} src={srcUrl} />;
        })}
      </video>
    );
  }
});

InformationsquelleAutor evilguc

Fand die Antwort

Dynamisch geändert wird, ein source-element und sein Attribut wenn das element bereits eingefügt in ein video-oder audio-element wird keine Wirkung haben. Zu ändern, was zu spielen, verwenden Sie einfach das src-Attribut auf die media-element direkt, vielleicht macht die Verwendung von canPlayType () - Methode zur Auswahl unter den zur Verfügung stehenden Ressourcen. Generell ist die Manipulation von Quell-Elementen manuell, nachdem Sie das Dokument geparst wurde ist einen unnötig komplizierten Ansatz

https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Es ist eine ziemlich hacky und zerbrechlich, aber es bekam den job zu erledigen für meinen Fällen.

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    pickSource: function(media){
      var vid = document.createElement('video');

      var maybes = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'maybe');
      });

      var probablies = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'probably');
      });

      var source = '';

      if (maybes.length > 0) { source = maybes[0]; }
      if (probablies.length > 0) { source = probablies[0]; }
      source = (source === '')? '' : 'content/'+source;
      return source;
    },

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var src = this.pickSource(video.media);

      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (
          <li><a className="greybutton" href={media}>{ext}</a></li>
        )
      });

      return (

        <div className="video-container">   
          <video title={title} src={src} controls width="100%"></video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox">
              <span>Downloads:</span>
              <ul className="downloadlinks">
                {downloadNodes}
              </ul>
            </div>

        </div>

      )
    }
  });

  module.exports = VideoView;

})();

InformationsquelleAutor Dana

1

Ich Stand vor dem gleichen Problem, und ich hatte keinen Zugriff auf die <video> HTML-tag, wie ich war, mit einer Bibliothek zum Rendern der Videos (nicht die native <video> HTML-tag), die ist intern verantwortlich für die Erbringung der <video> tag.

In diesem Fall habe ich eine andere Lösung gefunden, die ich denke, ist besser zu lösen, das gleiche Problem.

Bevor:
```
<VideoLibrary src={this.props.src} />
```
Nach:
```
<React.Fragment key={this.props.src}>
  <VideoLibrary src={this.props.src} />
</React.Fragment>
```
Oder diese, wenn Sie sind unter Verwendung der nativen <video> HTML-tag:
```
<React.Fragment key={this.props.src}>
  <video src={this.props.src} />
</React.Fragment>
```
Diese Weise Reagieren wird Darstellung unterschiedlicher video-tags, weil die src prop wird unterschiedlich sein, daher rendering ein anderes HTML-tag jedes mal, um dieses Problem zu vermeiden.

Ich finde diese Art sauberer und einfacher und funktioniert in beiden Fällen, wenn Sie haben oder nicht haben Zugang zu den <video> HTML-tag.

InformationsquelleAutor Hossam Mourad

Ich hatte das gleiche problem mit einer playlist mit videos.

Also trennte ich den video-player auf einen anderen reagieren Komponente
und diese Komponente erhielt zwei Requisiten: contentId (video identifizieren) & videoUrl (video-URL).

Auch ich habe ein ref auf das video-tag, damit ich es Schaffe den tag.

var Video = React.createClass({
    componentWillReceiveProps (nextProps) {
        if (nextProps.contentId != this.props.contentId) {
            this.refs['videoPlayer'].firstChild.src = this.props.videoUrl;
            this.refs['videoPlayer'].load()
        }
    },
    propType: {
        contentId: React.PropTypes.string, //this is the id of the video so you can see if they equal, if not render the component with the new url 
        videoUrl: React.PropTypes.string, //the video url
    } ,
    getDefaultProps(){
        return {
        };
    },
    render() {
        return (
            <video ref="videoPlayer" id="video" width="752" height="423">
                <source src={this.props.videoUrl} type="video/mp4" />
            </video>
        );
    }
});

module.exports = Video;

dies ist viel mehr sauber:

<Video contentId="12" videoUrl="VIDEO_URL" />

InformationsquelleAutor yonizilberman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.