html5 视频源在 safari 中没有改变

Question

我正在尝试更改 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）.. 此处的任何帮助将不胜感激。我撞墙了！谢谢！

Answer 1

不要$('.video').click(function(){...})，试试做

$('.video').each(function(){
    $(this).click(function(){
        ...
    })
})