3

現在、video.js を使用して、html5 ビデオからのフラッシュ フォールバックを処理しています。ユーザーがサイトのサムネイルをクリックすると、動的に (js/jquery を使用して) 必要な html を作成して jquery ui ダイアログ ウィンドウに挿入し、html5 またはフラッシュ フォールバックを使用してビデオを表示します。関連するコードは次のとおりです。

    //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
}

このコードは、動画のサムネイルが最初にクリックされたときに、すべてのブラウザーで完全に機能します。ユーザーが既に視聴したビデオのビデオ サムネイルをクリックすると、私のバグがトリガーされます。

FF では、2 回目のパスで「サポートされている MIME タイプのビデオが見つかりません」というエラーが表示されます。chrome と safari の両方が、2 回目のパスでビデオを読み込んで再生します。ただし、video.js プレーヤーではなく、デフォルトの html5 プレーヤーを使用してください。

私の問題は、一意のビデオ タグ ID を使用して video.js を初期化する必要があることだと思います。ユーザーがビデオのサムネイルを 2 回目にクリックすると、コードは既に使用されているビデオ タグ ID でプレーヤーを初期化しようとします。

この問題を回避するためのクリーンな方法を知っている人はいますか?

よろしくお願いします。

4

2 に答える 2

2

(新しいビデオごとに新しいインスタンスを作成するのではなく) ビデオ プレーヤー インスタンスを 1 つだけ作成することで、この問題を解決しました。次に、video.js の src メソッドを使用して、そのプレーヤーの src 属性を動的に変更します。

最初に、ビデオ プレーヤー インスタンス ( ) を保持する初期化されたグローバル変数を作成しましたvar videoPlayer = _V_("downloadedVideo)。次に、古い動画のサムネイル クリック イベント コードを次のコードに置き換えました。

`           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'});`

現在、video.js は、モバイル サファリを除くすべての最新のブラウザーで動作しています。私が理解できない何らかの理由で、モバイルサファリはビデオを読み込んだり再生したりしません。「読み込み中」の画像が円を描いて回っている空のプレーヤーを取得します。poster 属性の画像も読み込まれません。これについては、後日別記事にするかもしれません。

于 2012-08-27T20:35:27.110 に答える
0

ええ、プレーヤーは最初にレンダリングされたときにのみ認識されるように見えるので、プレーヤーの HTML が DOM にロードされるたびに、それが videoJS プレーヤーであることを認識するコードが必要になります。

チャックが持っているようです。さもないと：

私がしていることは、プレーヤを DOM に 1 回ロードし、必要がなければ非表示にし、再生用に新しい src をロードするときに表示することです。

お役に立てれば！

于 2012-12-19T18:46:37.323 に答える