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

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

ビデオHTMLコード:

私の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;
});
2
私はあなたの2つの計算でインラインである$(this).parent()。attr( 'id')を含む計算の前にすべての属性の読み込みをグループ化します。今の両方の計算では、jQueryがDOMを立ち上げる必要があり、遅くなります。 IDを一度読んでから、必要に応じて使用してください。また、完全なマークアップを提供していないので、これをデバッグするのは不可能です。私たちは$(this).parent()。attr( 'id')がどのように見えるかを推測しています。これにより、substring-substringステートメントをデバッグするのが難しくなります。
追加された 著者 BenSwayne,

3 答え

HTML5動画の仕様ポスタービデオデータが利用できない(ビデオのreadyState属性がHAVE_NOTHINGまたはHAVE_METADATAのいずれかで、ビデオデータがまだ取得されていないか、要素のreadyState属性が後続の値である場合)メディアリソースにはビデオチャネルがありません)。ビデオが一時停止され、現在の再生位置がビデオの最初のフレームである場合、要素は現在の再生位置に対応するビデオのフレームまたはポスターフレームのいずれかを表し、ブラウザに依存します。

あなたの状況では、おそらくビデオデータが利用可能なので、ポスターはレンダリングされません。私がライブデモをくれれば、問題の調査を手伝うことができます。

2
追加された

私は、あなたはタグを使用して属性に直接アクセスできるとは思わない。

私が参照しているのは、あなたの $( 'video')タグです。私の経験では、ページ上のすべてのタグの配列を返すべきです。できるなら、 id を使用してください。

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

Can you post your entire code, including the <div class="video-box-area">?

1
追加された

私はちょうどいくつかのことを試みました、そして、あなたのjquery呼び出しは大丈夫です。私が見ることができるのは、 posterChange 変数が実際に posterValue == '' である場合だけです。文字列が空の場合、attrは変更されません。

posterChange変数を計算して空であるかどうかを確認した直後に警告を出します。

0
追加された
ポスターのURLが変更されています。しかし何も更新されていないのです。
追加された 著者 3gwebtrain,
コード全体を記述してください。上記のあなたのサンプルピースを実行しようとしましたが(スタンドアローンで実行できるはずです)、常に ... var change = nowSrc.replace ... でクラッシュします。 [1]: jsfiddle.net/FNxZA/2
追加された 著者 g19fanatic,