Javascript HTML5视频幻灯片在Mac FF或Safari上不起作用

下面是我的JSFIDLE供大家查看：

这段代码在我的Mac电脑上的Chrome上运行得非常完美。Firefox和Safari没有。我有另一个撰稿人做了代码编辑，他说一切都在Windows上运行。如果你发现我做错了什么，请检查并告诉我。谢谢

js: $（函数（）{

由于某些原因，我的HTML和CSS代码不会显示在这里（我添加了4个空格并尝试了引号），因此，您必须查看JSFIDLE（见上文）

谢谢你帮了这个忙

---

S

我已经测试了你的小提琴，我可以马上看出，在Firefox上无法使用，因为你使用的是mp4。你可以为视频嵌入另一种格式，也可以为Firefox和opera使用.ogg

检查此MDN资源：

很抱歉，您的浏览器不支持带有VP8的WebM中的HTML5视频或带有H.264的MP4。

对fiddle做了一些修改。它在Safari上运行，但要获得更多支持，还需要包括webm和ogg

---

我想我在Firefox中看到了问题。我的文件命名错误，你是对的，我忘了添加webm/ogv。：pYes你在JSFIDLE上添加了格式，但这些文件目前不在服务器上：是的！这在Firefox上有效。但在Safari（Mac OS 10.6.x和iOS）上仍然存在问题。转换工作正常，但视频不会显示。@Alexextranational另外，我如何使用此代码为其他浏览器添加webm和ogv？@PhillippWerminghausenThe deplay是因为视频需要加载。您可以使用.canPlayType检查支持情况，然后相应地修改url。但这里有另一个版本也适用于safari。它更接近你所拥有的：让我们。

var $videos = $('.video'),
    numVideos = $videos.length,
    counter = 0;

setInterval(function () {
    ++counter;
    var $currentVideo = $('.video[data-state="playing"]'),
        $nextVideo = $currentVideo.next();


    $currentVideo.attr('data-state', '');

    if (counter == numVideos) {
        counter = 0;
        $nextVideo = $videos.first();
    }
    $nextVideo.attr('data-state', 'playing');
    $currentVideo.toggleClass('hidden');
    $nextVideo.toggleClass('hidden');

    $currentVideo.find('video')[0].pause();
    $currentVideo.find('video')[0].currentTime = 0;
    $nextVideo.find('video')[0].play();
}, 3000); // do this every 3 seconds    
}); 

<video controls>
  <source src="somevideo.webm" type="video/webm">
  <source src="somevideo.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
  <!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>

var content = [
        ['http://bwpcommunications.com/videobg/001.mp4','Let\'s get together and discuss your brand.'],
        ['http://bwpcommunications.com/videobg/002.mp4','Let\'s build a strategy together face to face.'],
        ['http://bwpcommunications.com/videobg/003.mp4','Let\'s create a compelling campaign and tell your story.']
    ];
    var numVideos = content.length,
        counter = 0,
        $video = $('#bgvid');
        $title = $('#title');
    setInterval(function () {
        ++counter;
        if (counter == numVideos) {
            counter = 0;
        }
        $video.attr('src',content[counter][0]);
        $title.html(content[counter][1]);
    }, 5000); // do this every 3 seconds