Reagieren - Verwenden und Laden von Videodateien

Question

Ich habe ein einzigartiges Problem mit einem Programm, das ich versuche zu schreiben. Ich schreibe eine Backend-REST-API in Symfony2, die es einem Benutzer ermöglicht, eine Videodatei (mp4) hochzuladen. Ich habe einen Front-End-Client, den ich in React geschrieben habe. Ich möchte in der Lage sein, eine bestimmte Videodatei aus einer Liste von Auswahlmöglichkeiten auszuwählen und genügend Informationen an eine Komponente über Requisiten zu übertragen, um ein Video zu laden.

Es gab ein kleines Problem beim Laden des Videos. Wenn ich den Pfad zum Video über Requisiten anschließe, wird das Video nicht angezeigt. Nur die Steuerelemente sind sichtbar, obwohl sie ausgegraut sind. Es ist fast so, als könnte es das Video nicht finden. Dies ist ein Beispiel dafür, wie mein React-Code im Moment aussieht.

render(){ 
    const {details, index} = this.props; 
    return(
     <li> 
      <div id="theVideo"> 
       <video id="samp" width="640" height="480" controls> 
        <source src = {this.props.details.videoPath} type="video/mp4"> 
         Your browser does not support this video format. 
        </source> 
       </video> 
      </div> 
      {details.textOfSpeech} 
     </li> 
    ); 

Das Seltsame ist, dass, wenn ich eine statische HTML-Datei und lädt im Pfad genau erzeugen, wie es die videoPath Requisiten kommt durch, um das Video angezeigt wird und die Kontrollen sind aktiv. Wie so .....

 <video id="samp" width="640" height="480" controls> 
     <source src="/Users/thevideos/SideProjects/speechQuill/app/../web/uploads/227bd2a3eee545b251f9362e08b1debe.mp4" type="video/mp4"> 
     </source> 
     </video> 

Ich konnte nicht feststellen, warum genau das vorkommt. Ich kann durch Einstecken in dem Weg zu einer Import-Anweisung oben auf meiner Component-Datei und das Einstecken den Einfuhrwertes in den Source-Tag, um das Problem zu bekommen ....

 import video from './prototype.mp4'; 
. 
. 
     <div> 
     <video controls src={video} type="video/mp4"></video> 

Dies wird den Video-Laden in Reaktion aber erhalten, wie ein Anfänger in React, es besiegt die Zwecke des Ladens in das Video von einer bestimmten Requisite Auswahl für die Funktionalität des Programms, das ich versuche zu bauen. Ich verstehe nicht, warum genau das passiert. Es passiert jedoch nicht, wenn ich eine URL in die Eigenschaft src einfüge.

Mein Symfony-Backend lädt die Datei in ein separates Verzeichnis, aus dem der Client wählen kann. So wollte ich die Anwendung ausführen, aber ich überlege, den Upload-Prozess zu ändern, um ihn an Cloudinary oder etwas zu senden, damit ich dieses Problem umgehen kann. Ich möchte unbedingt etwas wie popcorn.js verwenden, damit ich hochgeladene Videos kommentieren kann. Dennoch möchte ich verstehen, warum dies in React passiert und nicht eine statische HTML-Datei und wie dieses Problem zu umgehen ist.

Jeder Einblick würde sehr geschätzt werden. :-)

Answer 1

Sie deklarieren const {details, index} = this.props;, um den Namen Ihrer Requisiten zu verkürzen, so dass es nicht mehr notwendig ist, this.props zu verwenden, verwenden Sie einfach details oder index.

render(){ 
    const {details, index} = this.props; 
    return(
     <li> 
      <div id="theVideo"> 
       <video id="samp" width="640" height="480" controls> 
        <source src = {details.videoPath} type="video/mp4"> 
         Your browser does not support this video format. 
        </source> 
       </video> 
      </div> 
      {details.textOfSpeech} 
     </li> 
    ); 

Ich hoffe, es funktioniert =)