HTML5 视频自动播放不适用于 slick.js

Posted 2023-03-05

【中文标题】HTML5 视频自动播放不适用于 slick.js

【英文标题】：HTML5 Video autoplay not working with slick.js

【发布时间】：2016-07-17 04:34:11

【问题描述】：

重新表述问题

html5 视频自动播放在 chrome 和 safari 上的 slick.js 中不起作用。 在 Firefox 中一切正常。

自动播放在光滑的容器外工作正常。

我试过这个： Video auto play is not working in Safari and Chrome desktop browser

但似乎无法让它工作。

我的巧妙设置

$(document).ready(function () 
    $('.slick-hero').on('init', function (e, slick) 
        var $firstAnimatingElements = $('div.slick-hero:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElements);
    );
    $('.slick-hero').on('beforeChange', function (e, slick, currentSlide, nextSlide) 
        console.log(nextSlide);

        var $animatingElements = $('div.slick-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
        console.log($animatingElements.length);
        doAnimations($animatingElements);
    );
    $('.slick-hero').slick(
        autoplay: true,
        autoplaySpeed: 7000,
        pauseOnHover: false,
        speed: 1000,
        dots: true,
        fade: true,
        adaptiveHeight: true
    );
    function doAnimations(elements) 
        var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        elements.each(function () 
            var $this = $(this);
            var $animationDelay = $this.data('delay');
            var $animationType = $this.data('animation');
            $this.css(
                'animation-delay': $animationDelay,
                '-webkit-animation-delay': $animationDelay
            );
            $this.addClass($animationType).one(animationEndEvents, function () 
                $this.css();
                $this.removeClass($animationType);
            );
        );
    
);

原问题： 我无法让简单的 HTML5 视频自动播放。

在 Firefox 中一切都很美好。

我相对简单的实现

<video poster="assets/video/ocean.jpg" id="bgvid" controls autoplay loop muted>
   <source src="assets/video/ocean.mp4" type="video/mp4">
   <source src="assets/video/ocean.webm" type="video/webm">
   <source src="assets/video/ocean.ogv" type="video/ogg">
</video>

这不行！！！控件工作正常，但自动播放却不行。 我尝试通过双击在浏览器中打开它，通过本地主机和我自己的网站......什么都没有。

视频的 URL 很好，我测试了它们。 我在使用最新版本的 chrome 和 safari 的 macbook pro 上。 在 Firefox 中一切正常。

这个例子运行良好： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay,

这个例子运行良好： https://codepen.io/dudleystorey/pen/knqyK

也试过用这个： https://github.com/VodkaBears/Vide/

演示文件运行良好。 但是当我尝试在我自己的代码上实现它时，它只会显示海报图像。

【问题讨论】：

Video auto play is not working in Safari and Chrome desktop browser的可能重复

【参考方案1】：

重新发布相关问题的答案：

按照其他答案的建议使用 jQuery play() 或 DOM 操作后，它在 android 版 Chrome（版本 56.0）中仍然无法正常工作（视频未自动播放）。

根据 developers.google.com 中的 post，从 Chrome 53 开始，浏览器会尊重自动播放选项，如果视频静音。

因此，在视频标签中使用autoplay muted 属性可以使视频在 Chrome 浏览器 53 版本中自动播放。

来自上述链接的专家：

从 53 版开始，Android 版 Chrome 支持视频静音自动播放。如果设置了 autoplay 和 muted，则视频元素进入视野后将自动开始播放[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

ios 10 及更高版本上的 Safari 支持静音自动播放。 无论是否静音，Firefox 和 UC 浏览器都已在 Android 上支持自动播放：它们不会阻止任何类型的自动播放。

【讨论】：

请不要在多个问题中添加the same answer。回答最好的一个并将其余的标记为重复。见Is it acceptable to add a duplicate answer to several questions?

@FelixSFD 抱歉！我应该删除这个答案吗？

【参考方案2】：

如果您的代码中此视频标签的任何父级对其进行了任何 DOM 操作，则自动播放在 Safari 和 Chrome 中将不起作用。这是一个类似的问题，其答案应该对您有所帮助：

Video auto play is not working in Safari and Chrome desktop browser

【讨论】：

刚刚发现一切正常...罪魁祸首是 slick.js 插件。当我将视频元素放在滑块之外时，一切正常。但我还在第一方……我不知道为什么会这样。

哦，是的。 Slick.js 进行了大量的 DOM 操作。如果视频标签是轮播的子标签，Chrome 和 Safari 将不会自动播放视频。您必须使用 javascript 来播放视频。

我原来的回答是检查其他问题是否仍然成立。那里有几种解决方案可能会解决您的问题，例如将preload="true" 添加到视频标签，或者添加一段javascript 来播放canplaythrough 事件上的视频。老实说，您的帖子中没有足够的信息来帮助我达到可以调试的程度。也许为我们设置一个演示？