Question

该代码在我的Mac上的Chrome中运行良好。 Firefox和Safari没有。我有另一个贡献者进行了代码编辑，他说一切都在Windows上运行。如果你看到我做错了什么，请复习并告诉我。谢谢！

JS： $（function（）{

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    
});

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

感谢您帮助这个菜鸟！

取值

Answer 1

我已经测试了你的小提琴，我可以直接看到，因为你使用的是mp4，Firefox无法正常工作。您可以为视频嵌入替代格式，并且可以将.ogg用于firefox和opera。

检查此MDN资源： https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats?redirectlocale=en-US&redirectslug=Media_formats_supported_by_the_audio_and_video_elements

<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>

Answer 2

稍微修改了小提琴。它适用于Safari，但为了获得更多支持，您还需要包含webm＆amp;奥格。

http://jsfiddle.net/me2loveit2/Z2Nq8/82/

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

HTML5视频幻灯片无法在Mac FF或Safari上运行

2 个答案: