0

私はhtml5でビデオのソースを変更しようとしていますが、Safariでは私がやろうとしている方法では変更されません:

これが私のJQUERYです：

$(".video").click(function (){
    var str = $(this).attr("id");
    var nww = str.substring(0, str.length - 4);
    $(".id").append(nww);
    $("#vid source:eq(0)").attr("src", nww+".mp4");
    $("#vid source:eq(1)").attr("src", nww+".ovg");
    $("#vid source:eq(2)").attr("src", nww+".webm");
    $("#vid")[0].load();
    });

これが私のHTMLです（クリックするボタン）：

<div class="vid">
    <a id="http://cancunvideo.com/videos/localidades/cancun/spa/renova_spa_riu_caribe/assets/videos/Hotel_Riu_Caribe.mp4" class="video">
        <img src="http://cancunvideo.com/videos/localidades/cancun/spa/renova_spa_riu_caribe/assets/videos/Hotel_Riu_Caribe.jpg" width="230" height="120" border="0" />
    </a>
</div>

そして、ここに私のビデオHTMLがあります:

<div id="mainVid">
   <video id="vid" width="640" height="360" poster="http://cancunvideo.com/videos/toyota_cancun/hossana/sources/template_toyota.png" autoplay="autoplay" controls style="display: block;">

      <!-- This is the path for the video. It's in webm format -->
  <source src="<?php echo $webm ?>" type='video/webm; codecs="vp8, vorbis"' />
        <!-- This is the path for the video. It's in OGV format -->
  <source src="<?php echo $ovg ?>" type='video/ogg; codecs="theora, vorbis"' />
        <!-- This is the path for the video. It's in mp4 format -->
  <source src="<?php echo $mp4 ?>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

    When a browser can't handle the poster fallback, it will show this P tag instead. Which happens to be the same static image.
    <p width="640" height="360" align=style="display: block; line-height: 1px;"><img src="http://cancunvideo.com/videos/toyota_cancun/hossana/sources/template_toyota.png" id="poster" alt="Poster" width="640" height="360" border="0" style="display: block;"></p> 
   </video> 
   <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->

   </div>

そして、Safari では、すべてのソースが変更されますが、jquery (MP4) で呼び出された最初のソースのみが変更されます。そしてFirefoxでは、それらをすべて最後のもの（.jpg）に変更します..ここで何か助けていただければ幸いです。壁にぶち当たりました！ありがとう！

4

1 に答える 1

1

の代わりに$('.video').click(function(){...})、やってみてください

$('.video').each(function(){
    $(this).click(function(){
        ...
    })
})
于 2012-04-23T14:47:10.753 に答える