Anythingslider html 5视频自动播放

Question

求求你们，我需要你们的帮助！

我使用Anythingslider在HTML5视频和其他内容之间滑动，但当我在视频标签中添加autoplay属性时，Anythingslider只播放音频。

Answer 1

您确定视频没有隐藏在另一个元素后面吗？播放z索引，因为视频应该是可见的。我在过去遇到过一些问题，比如视频在scroll上的可见性上下闪烁。

我最终在一个灯箱中播放视频，因为在旋转木马继续滚动时，任何滑块都会离开视频播放。此外，如果你使用无限滚动，在两个地方播放视频也会有问题。

如果你正在使用像JW播放器这样的东西，你将能够设置一些动作来暂停幻灯片上的视频或类似的，但基本的youtube嵌入将是一个问题。

Answer 2

不要将autoplay属性添加到HTML5视频。可能发生的情况是，视频的克隆副本(仅限第一张和最后一张幻灯片)正在播放视频，但您听到的只是音频，因为面板不在视图中。你不想自动播放的原因是，即使AnythingSlider在另一张幻灯片可见的情况下启动，它仍然会自动播放，而且它不会停止，直到你在面板中循环。

如果你想在面板可见时自动播放视频，你必须在完成的回调中添加一些脚本(以下代码不需要视频扩展；demo)：

var playvid = function(slider) {
    var vid = slider.$currentPage.find('video');
    if (vid.length) {
        // autoplay
        vid[0].play();
    }
};

$('#slider').anythingSlider({

    // Autoplay video in initial panel, if one exists
    onInitialized: function(e, slider) {
        playvid(slider);
    },
    // pause video when out of view
    onSlideInit: function(e, slider) {
        var vid = slider.$lastPage.find('video');
        if (vid.length && typeof(vid[0].pause) !== 'undefined') {
            vid[0].pause();
        }
    },
    // play video
    onSlideComplete: function(slider) {
        playvid(slider);
    },
    // pause slideshow if video is playing
    isVideoPlaying: function(slider) {
        var vid = slider.$currentPage.find('video');
        return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
    }

});​