2017-01-31 3 views
0

Ich bin ein neuer Flüchtling von Planet Flex/Actionscript und bin immer noch dabei, die Grundlagen herauszufinden, also ist das wahrscheinlich eine ziemlich einfache Frage verwirrt unten durch die Linie.Verständnis dieses Musters: videojs ("videoPlayer", {}, function() {}

videojs("videoPlayer", {}, function(){} 

Obwohl ich es erfolgreich bin mit (unten) ich es nicht verstehen es scheint ein globales videojs Objekt lenken werden, um eine Instanz-ID „videoplayer“ zu finden, mit Optionale Parameter (das {}) und dann die anonyme Funktion der Instanz aufrufen

Habe ich das Recht? Was meine Verwirrung ausgelöst hat, sind die optionalen Parameter (das {}). Könnte ich damit die src und poster übergeben und die Funktion überspringen? Hat dieses Muster einen Namen und ist es üblich?

Fühlen Sie sich frei, um mich anzuschreien, ob dies ein Duplikat ist ...


Kontext: ich eine Desktop-Anwendung baue Electron mit Timeline.js Host, in dem ich Zugriff und lokale .mp4 Dateien anzeigen . Timeline.js verwendet eine iFrame als "alles, was Sie wollen" -Option, so habe ich eine "video.html" -Datei als Quelle für den iFrame. Im JSON für die Timeline, verwende ich eine Abfrage-String params für Video.js


zum iFrame passieren
<script> 
    function getParamValue(paramName) { 
     var url = window.location.search.substring(1); 
     var qArray = url.split('&'); 
     for (var i = 0; i < qArray.length; i++) { 
      var pArr = qArray[i].split('='); 
      if (pArr[0] == paramName) 
       return pArr[1]; 
     } 
    } 

    // grap the video & poster frame refs from url 
    var videoSrc = getParamValue('videoSrc'); 
    videoSrc = "assets/videos/" + videoSrc; 

    var poster = getParamValue('poster'); 
    poster = "assets/images/" + poster; 

    videojs("videoPlayer", {}, function(){ 
      this.src(videoSrc); 
      this.poster(poster); 
      this.load(); 
    }); 

</script> 

Snippet von meinem Timeline.js JSON

"media": { 
     "caption": "caption", 
     "credit": "", 
     "url": "<iframe allowfullscreen 
         webkitallowfullscreen 
         src='video.html?videoSrc=Z.mp4&poster=W.jpg' 
         width='320' height='240'></iframe>", 
     }, 
+0

Wäre das nicht in der Video.js Dokumentation erklärt werden? – JJJ

+0

@JJJ Meine Frage geht über 'Video.js' hinaus, um die Besonderheiten des Codes zu verstehen, nicht die API allein. –

+1

Dies ist nicht viel ein Muster. Videojs ist eine Funktion. Jemand hat es geschrieben und Sie nennen es einfach mit 3 Parametern - eine Zeichenfolge, ein leeres Objektliteral und eine Funktion. Was in Punkt 2 akzeptiert wird - das ist eine Frage für VideoJS-Dokumente. Hoffe, das ist nicht zu einfach :) –

Antwort

0

Es ist alles bis hin zur Videojs-Implementierung.

Die second {} parameter ist ein 'leeres Objekt', aber Sie können zusätzliche Parameter übergeben, wenn Sie möchten.

Die third parameter (wo Sie die anonyme Funktion haben) ist eine Funktion, die ausgeführt wird, nachdem videojs geladen und initialisiert wurde.

Das ist alles erklärt in der Video js Dokumentation, aber wie Sie ein Javascript-Neuling bin ich verzeihen, da sowohl 'ein leeres Objekt {}' kann neues Konzept für Sie sein, als könnte die Tatsache, dass Javascript Dateien benötigen Zeit, um asynchron geladen zu werden, und dann benötigt ihr Code natürlich Zeit, um zu initialisieren. Daher ist es in guten Bibliotheken von Drittanbietern üblich, das Verhalten 'run this code when initialized' zu implementieren, indem eine Funktion übergeben wird.

Also, das ist eine ziemlich häufige Implementierung "Muster" für die Initialisierung von Javascript-Bibliotheken von Drittanbietern, aber ich glaube nicht, dass es einen bestimmten Namen hat.

+0

danke - das ist, was ich wissen musste. Es ist alles ganz anders als das klassenbasierte Actionscript, daher sind diese globalen Funktionen usw. etwas verwirrend. –

1

Ja, können Sie den zweiten Parameter verwenden, um die "Ready-Funktion" des dritten Parameters, beispielsweise zu ersetzen: bereit

videojs("videoPlayer", { src: videoSrc, poster: videoPoster, preload: true } }); 

Und der Spieler!

Nur ein einfacher Tipp:

src: "http://www.example.com/path/to/video.mp4" 

oder

src: { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" } 

oder

src: [ 
    { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" }, 
    { type: "video/webm", src: "http://www.example.com/path/to/video.webm" }, 
    { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" } 
] 

Die zweite macht:

Sie können die Videoquelle mit diesen Methoden schreiben die Dinge sind einfach für die videojs-Engine überprüfen, ob es Unterstützung für die Wiedergabe dieser Datei hat.

Der letzte gibt eine Chance für den Spieler spielt einen alternativen Dateityp, wenn sein Browser keine Unterstützung für die Datei hat, in dieser Reihenfolge.

Viel Glück und glücklich spielen :-)