2011-10-20 4 views
2

ビデオタグ経由で追加されたビデオを再生するカラーボックス経由でHTML5ドキュメントを読み込もうとしています。動画へのリンクは次のとおりです。HTML5ビデオが読み込まれていますが再生されていません

<a href="content/video/test-video-01.html" class="cboxElement"></a> 

JSは、カラーボックスを追加することです:

var $gallery = $('a.cboxElement').colorbox({ 
    transition : 'elastic', 
    speed : box_speed, 
    maxHeight : 700, 
    maxWidth : 900, 
    initialHeight : 486, 
    initialWidth : 722, 
    fixed : true, 
    preloading : false, 
    onCleanup : function() { 
     $('canvas#connector').fadeOut(box_speed); 
    }, 
    onClosed : function() { 
     box_opened = false; 
     initiateActivity(); 
    } 
}); 


$('a.cboxElement').click(function(e) { 
    $gallery.eq(0).click(); 
    return false; 
}); 

そして最後に、テスト・ビデオ・01.htmlは、次のようになります。

<video width="722px" height="487px" controls="controls"> 
    <source src="http://localhost:8888/ipm/content/video/test-video-01.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="http://localhost:8888/ipm/content/video/test-video-01.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    Your browser does not support the video tag. 
</video> 

私は異なるMIMEタイプを許可するために、AddType宣言を.htaccessファイルに追加しました。

問題はこれは、私がColorboxでコンテンツを読み込んだときに、ムービーとコントロールを表示することです。しかし、映画は再生されません。私はムービーのタイムラインをクリックしてムービーのさまざまなフレームを見ることができますが、それは再生されません。私がtest-video-o1.htmlファイルに直接アクセスすると、完全に動作します。 ColorboxはHTMLファイルを取得するAJAXリクエストを行い、これが問題の原因になるかどうか疑問に思っています。これに関する助けは素晴らしいでしょう。ありがとう!

答えて

0

申し訳ありませんが、これはコメントのために大きかったため、答えとして掲載しました。 jsfiddleを投稿する可能性はありますか?私の頭の上から

いくつかのこと:

  1. あなたがautoplay属性を使用する場合はどうなりますか?
  2. mp4のバージョンが 'faststart'/ moov atom/streamingに最適化されているようにビデオをエンコードしましたか?
  3. あなたはそれがログオンした場合見る「canplaythrough」 イベントのための要素にjsのリスナーを添付しよう
  4. (206 応答..しばしばちゃったごめんなさいを引き起こし)、サーバー上で実行されている部分コンテンツのヘッダーを持っていますか。
関連する問題