Mit video.js mit dynamisch erstellten video-tags

Derzeit bin ich über video.js zu handhaben flash-fallback von html5-video. Wenn ein Benutzer auf eine Miniaturansicht auf meiner Website, die ich dynamisch mit js/jquery) erstellen, und fügen Sie den gewünschten html-Code in ein jquery-ui-dialog-Fenster, das zeigt dann das video, entweder mit html5 oder flash-fall-back. Hier ist der relevante code:

    //setup jquery ui dialog window 
    $( "div#video_box" ).dialog({
            autoOpen: false,
            modal: true,
            width: 'auto',
            resizable: false,
            draggable: true,
            close: function() {
                $("video").remove()
            }
         });

    //the following code runs after a video thumbnail click event.  
{
    var $videoBox = $("div#video_box"),
    url = VIDEOSTORAGE + id ,  //url to s3 storage bucket + id of the video/thumbnail that was clicked
    html ="";
    html += "<video id='downloadedVideo_"+id+"' class='video-js vjs-default-skin' width='320' height='240' controls preload='auto' width='640' height='264' poster='"+PHOTOSTORAGEMEDIUM + id'>";
    html += "<source src='"+url+".mp4' type='video/mp4' />";
    html += "</video>";
    $videoBox.html(html);
    $("#downloadedVideo_"+id).load();
    $videoBox.dialog( "open" );
    _V_("downloadedVideo_"+id);  //initialize video player
}

Dieser code funktioniert perfekt auf allen Browsern das erste mal, dass ein video thumbnail geklickt wird. Mein Fehler wird ausgelöst, wenn ein Benutzer klickt auf das video-thumbnail für ein video, dass hat er schon geguckt.

In FF bin ich ein "kein video mit unterstützten mime-Typ gefunden" Fehler auf dem zweiten pass an. Chrome und safari laden und spielen Sie das video auf dem zweiten pass; aber nicht so mit Ihren Standard-html5-player anstatt der video.js player.

Ich denke, dass mein problem ist, dass video.js muss initialisiert werden, die mit einzigartigen video-tag-ids, und das zweite mal ein Benutzer klickt auf ein video-thumbnail mein code versucht zu initialisieren, muss der Spieler mit einem video-tag-id, die es bereits verwendet.

Kennt jemand eine saubere Möglichkeit um dieses problem zu vermeiden?

Vielen Dank im Voraus für Ihre Hilfe.

InformationsquelleAutor chuck w | 2012-08-26
  1. 2

    Ich das Problem gelöst, indem nur ein video-player-Instanz (statt in eine neue Instanz pro jedem neuen video). Ich habe dann dynamisch zu ändern, dass die Spieler des src-Attribut verwenden video.js' src-Methode.

    Zuerst erstellte ich eine initialisiert eine Globale variable, um den video-player-Instanz (var videoPlayer = _V_("downloadedVideo)). Dann ersetzte ich meinen alten video-thumbnail click-Ereignis-code mit den folgenden:

    `           var $videoBox = $("div#video_box"),
                url = VIDEOSTORAGE + id + "/" + encodeURI(post.video_file_name.split(".")[0]);    
            $videoBox.dialog('option', 'title', post.video_file_name);
            $videoBox.dialog('option', 'position', ["center", 100]);
            $videoBox.dialog( 'open' );
            $(video).attr('poster', PHOTOSTORAGEMEDIUM + id + "/" + post.photo_file_name);
            videoPlayer.src({type: 'video/mp4', src: url + '.mp4'});`

    Nun video.js funktioniert auf allen modernen Browsern AUßER dem mobilen safari. Für einige Grund, dass ich nicht herausfinden können, mobile safari nicht laden/spielen, keine videos. Bekomme ich nur eine leere Spieler mit dem "loading" - Bild zu gehen um in einem Kreis. Es wird nicht einmal laden Sie das Bild auf das poster-Attribut. Ich könnte einen eigenen post später heute.

    InformationsquelleAutor chuck w
  2. 0

    Yeah, sieht aus wie der player wird nur erkannt, wenn er das erste mal gerendert wird, benötigen Sie ur-code, um zu bestätigen, dass es ein videoJS-player jedes mal, dass Spieler von HTML ist die in das DOM geladen.

    Sieht aus wie chuck hat es. Ansonsten:

    was ich zu tun ist, laden Sie den player in den DOM einmal, es verstecken, wenn nicht benötigt, zeigen, dass es beim laden von neuen src für das Spiel.

    Hoffe, das hilft!

    InformationsquelleAutor Cody
Schreibe einen Kommentar