Anythingslider html 5视频自动播放 [英] Anythingslider html 5 video autoplay

问题描述

请我需要你的帮助人员！

please i need your help folks!

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

I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.

推荐答案

不要将自动播放属性添加到HTML5视频。可能发生的事情是，视频的克隆副本（仅限第一张和最后一张幻灯片）正在播放视频，但您听到的只是音频，因为面板不在视野中。您不想自动播放的原因是，即使AnythingSlider以另一张可见幻灯片开头，它仍会自动播放，并且在您循环播放面板之前它不会停止。

Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.

如果您希望视频在面板可见时自动播放，则必须在完成的回调中添加一些脚本（以下代码不需要视频扩展名; 演示）：

If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; 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);
    }

});​

这篇关于Anythingslider html 5视频自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！