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

Question

这是我的 jsfiddle 以供审查:http://jsfiddle.net/Z2Nq8/81/

该代码在我的 Mac 上的 Chrome 中运行完美。 Firefox 和 Safari 则没有。我有另一个贡献者进行了代码编辑，他说一切都在 Windows 上运行。如果您发现我做错了什么，请复查并告诉我。谢谢!

js: $(函数(){

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

我已经测试了你的 fiddle ，我可以立即看到它在 Firefox 上不起作用，因为你使用的是 mp4。您可以为视频嵌入另一种格式，并且可以将 .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>