0

ビデオを再生し、再生できるビデオのリストを持つ Web ページをまとめようとしています。Chrome、Firefox、Opera では問題なく動作していますが、もちろん IE 8 では多くの問題が発生します。ビデオ プレーヤー自体は、Flash Flowplayer フォールバックを備えたネイティブの HTML 5 ビデオ プレーヤーです (ほぼ IE 8 専用です)。そのための HTML は次のようになります。

<video controls width="640" height="360">
  <source id='mp4src' src="videos/foo.mp4" type="video/mp4">
  <source id='webmsrc' src="videos/foo.mp4.webm" type="video/webm">
  <a href="videos/foo.mp4" style="display:block;width:425px;height:300px;" id="player">
  </a>
</video>

アンカー タグは、Flowplayer の一種のコンテナーであり、Flowplayer のドキュメントに従って行われます。

今、私が書いたjQueryは次のことをするはずです:

  • 各リスト項目の 2 つの疑似属性 (それぞれにビデオの URL が含まれています) を取得し、それらを変数にします。
  • video タグ内の 2 つの source タグを削除します
  • video タグ内のアンカー タグを空にする
  • 以前に作成した変数を src 属性として使用して、2 つの新しいソース タグを作成します。
  • アンカー タグの href 属性を変数に変更します。
  • アンカー タグを再設定するために Flowplayer 関数を実行します。
  • ビデオをリロードする

そして、ここにjQuery自体があります

$(document).ready(function(){
  $('.playlists11 #playlist li').click(function(){
    var url1 = $(this).attr('url1');
    var url2 = $(this).attr('url2');
    $('.content video #mp4src').remove();
    $('.content video #webmsrc').remove();
    $('.content video a').empty();
    $('.content video').prepend("<source id='webmsrc' src='" + url2 + "' type='video/webm'>");
    $('.content video').prepend("<source id='mp4src' src='" + url1 + "' type='video/mp4'>");
    $('.content video #player').attr('href',url1);
    $f("player", "flowplayer/flowplayer-3.2.16.swf");
    $('.content video').load();
  });
});

これは、IE 8 を除くすべてのブラウザーで魅力的に機能します。SO誰かが教えてください、IE 8でしか動作しない私のコードの何が問題なのですか?

4

1 に答える 1

0

うわー、私は自分の質問に答えるのが本当に上手になってきました。:P

これに対する修正は、 に変更$('.content video a').empty();し$('.content #player').empty();、 に変更$('.content video #player').attr('href',url1);することでした$('.content #player').attr('href',url1);。IE 8 は video タグの実装方法を知らないだけでなく、それらの存在を完全に無視していると思います...

于 2013-07-03T19:46:40.077 に答える