Djangoのオブジェクトのページ番号リストを反復するJS

Question

私が維持するDjango Webアプリケーションでは、他の人が再生できるビデオをアップロードします。すべての動画はmp4としてエンコードされています。ブラウザがこの形式（Firefoxなど）で再生できない場合は、エレガントなフォールバックをプログラムする必要があります。私はexample hereに従っています - それはうまくすべての基地をカバーしています。

私のDjangoテンプレートは、ページベースのクラスベースのListViewによってバックアップされています。それにはobject_listが渡されます。私はこのリストを繰り返し、ビデオを1つずつ表示します。各ページには10個のビデオオブジェクトがあります。

すなわち、次のようなもの（簡体字コード）：

{% for vid in object_list %} 

     <video width="500" height="350" controls autoplay> 
     <source src="{{ vid.streaming_url }}" type='video/mp4; codecs="mp4v.20.8, samr"'> 
      <a href="{{ vid.streaming_url }}"> 
       <img src="https://a2ua.com/404/404-005.jpg" title="Your browser does not support the <video> tag"> 
      </a> 
     <p>This browser can't run this video</p> 
     </video> 

    {% endfor %} 

これは非常に単純です。私がJSに精通していないので、まっすぐ進むべきではない（私にとっては）付随するJSです。

私がしようとしている以下：

<script> 
var videos = document.querySelectorAll('video'); 
for (var i = 0; i < videos.length; i++) { 
    var v = videos[i]; 
    var sources = v.querySelectorAll('source'), 
     lastsource = sources[sources.length-1]; 
    lastsource.addEventListener('error', function(ev) { 
     var d = document.createElement('div'); 
     d.innerHTML = v.innerHTML; 
     v.parentNode.replaceChild(d, v); 
    }, false); 
} 
</script> 

これは、内forloopをに置かれる直前{% endfor %}【選択の問題は、それがもとですべてのページに最後のビデオのためにのみ正しく動作していますこの設定。 をの外側に置くと、forloopも同様の結果になることに注意してください。私は間違っている可能性がありますが、正しくページ分割を考慮していないと思います。誰かがこれを改善するのに役立つことができる？

Answer 1

私は問題があなたのJavascriptで可変スコープであると思います。すべてにはグローバルスコープがあるため、ループの各反復中に上書きされ、ループ内の最後の項目は「スティック」だけです。関数にそのロジックを移動

はあなたの問題を解決する必要があります。

<script> 
// Define a function to apply the fallback logic to a single video element 
var applyFallback = function(v){ 
    var sources = v.querySelectorAll('source'), 
     lastsource = sources[sources.length-1]; 
    lastsource.addEventListener('error', function(ev) { 
     var d = document.createElement('div'); 
     d.innerHTML = v.innerHTML; 
     v.parentNode.replaceChild(d, v); 
    }, false); 
}; 

var videos = document.querySelectorAll('video'); 
for (var i = 0; i < videos.length; i++) { 
    applyFallback(videos[i]); 
} 
</script> 

あなたのHTMLに迫っ</body>タグのできるだけ近くにこのコードは、外テンプレートのループでなければなりません。