jqueryを使用してビデオポスターを変更するにはどうすればよいですか？

Question

私はビデオのリスト作業をしています。そこには、3つの異なるIDを持つ3つのリンクがあります。ユーザーがリンクをクリックすると、ビデオとビデオのポスターが変更されなければなりません。私のjqueryコードを使用している間、ビデオは変化していますが、attr "ポスター"はまったく変化しません...何らかの理由がありますか？これは私が使用しています何私のコード...

ビデオHTMLコードです：

<video width="600" height="360" id="player2" poster="videos/video1/video1.jpg" controls="controls" preload="none"> 
    <!-- MP4 source must come first for iOS --> 
    <source type="video/mp4" src="videos/video1/video1.mp4" /> 
    <!-- WebM for Firefox 4 and Opera --> 
    <source type="video/webm" src="videos/video1/video1.webm" /> 
    <!-- OGG for Firefox 3 --> 
    <source type="video/ogg" src="videos/video1/video1.ogv" /> 
    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off --> 
    <object width="640" height="360" type="application/x-shockwave-flash" data="videos/flashmediaelement.swf"> 
     <param name="movie" value="videos/flashmediaelement.swf" /> 
     <param name="flashvars" value="controls=true&amp;file=videos/video1/video1.mp4" /> 
     <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --> 
     <img src="videos/video1/video1.jpg" width="640" height="360" alt="Here we are" 
      title="No video playback capabilities" /> 
    </object> 
</video> 

私のjqueryのコード：

$('div.video-box-area img').click(function(){ 
    var nowSrc = $('video').attr('src'); 
    var change = nowSrc.replace(nowSrc.substr(12,1),$(this).parent().attr('id').substr(length-1)); 

    var poster = $('video').attr("poster"); 
    var posterChange = poster.replace(poster.substr(12,1),$(this).parent().attr('id').substr(length-1)); 

    $('video').attr("poster",posterChange); 
    $('video').attr('src',change); 

    return false; 
}); 

Answer 1

は、私はちょうどfew thingsを試してみました、それはあなたのjQueryの呼び出しがあるように見えますはい。私が見ることができる唯一のことは、の変数がposterChangeの場合です。文字列が空の場合、attrは変更されません。

あなたはposterChange変数を計算し、それが空であるかどうかを確認した後、アラート権利を行う...

Answer 2

私はあなたがタグ名を使って、直接属性にアクセスすることができると思ういけません。私はあなたが、あなたの代わりにIDでそれを一致させる必要がありますすることができた場合、ページ上のすべてのタグの配列を返す必要があります私の経験で、あなたの$('video')タグであるためにreferreringています何

。

これは可能ではなく、ページにビデオタグが1つしかないと確信している場合は、$('video')[0]のようなことができますが、それは良い解決策ではありません。

<div class="video-box-area">を含むコード全体を投稿できますか？ なしビデオデータが（ビデオのreadyStateの属性がHAVE_NOTHING、またはHAVE_METADATAが、ビデオなしのデータのいずれかであるが、まだ全く得られてきた、または要素のreadyStateの属性があり利用できない場合HTML5 video specs、によると、ポスターは表示され

Answer 3

メディアリソースにはビデオチャネルがありません）。ビデオが一時停止され、現在の再生位置がビデオの最初のフレームである場合、要素は現在の再生位置に対応するビデオのフレームまたはポスターフレームのいずれかを表し、ブラウザに依存します。

場合によっては、ビデオデータが利用可能な可能性がありますので、ポスターはレンダリングされません。あなたが私にライブデモを与えるならば、あなたが問題を調査するのを手助けすることができます。