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(){
        ...
    })
})

html5视频源在Safari中没有变化

1 个答案: