Question

好的，所以我已经尝试了很多东西，我的代码中有些东西阻止了HTML5自动播放属性

这是我到目前为止所尝试的内容：

-    autoplay

-    autoplay="autoplay"

-    $.fn.fullpage({
        scrollOverflow: false,
        afterRender: function(){
            $('#video')[0].play();      
        }
    });

我还尝试删除jquery.fullPage.js中的部分代码，看看是否会让它发生冲突，但这只是让我无法滚动。

/**
        * Plays video and audio elements.
        */
        function playMedia(destiny){
            var panel = getSlideOrSection(destiny);

            //playing HTML5 media elements
            panel.find('video, audio').each(function(){
                var element = $(this).get(0);

                if( element.hasAttribute('data-autoplay') && typeof element.play === 'function' ) {
                    element.play();
                }
            });

            //youtube videos
            panel.find('iframe[src*="youtube.com/embed/"]').each(function(){
                var element = $(this).get(0);

                if ( element.hasAttribute('data-autoplay') ){
                    playYoutube(element);
                }

                //in case the URL was not loaded yet. On page load we need time for the new URL (with the API string) to load.
                element.onload = function() {
                    if ( element.hasAttribute('data-autoplay') ){
                        playYoutube(element);
                    }
                };
            });
        }

这是我的HTML

<video id="video" width="100%" height="100%" class="bgvid" style="position: relative; float: left; z-index: 2; opacity: 0.4;" controls muted="muted" autoplay="autoplay">
<source src="images/boston.mp4" class="bgvid">



</video>

<div style="position: absolute; z-index: 100; float: left; margin-top: 15%; margin-left: 5%;">
    <span class="title"> Web Design and Entertainment </span><br>
    <span style="font-size: 22px; font-weight: 500; font-family: 'Raleway', sans-serif; color: black;"> right in the heart of Boston. </span>
<br><br>
    <hr style="border: 1px solid red;">
<br>
    <span style="font-size: 19px; font-weight: 500; font-family: 'Raleway', sans-serif; color: black;">We're a <span class="red">web design</span>, <span class="red">software engineering</span>, and <br><span class="red">entertainment</span> company to help you grow <br>your business online. </span>
<br><br><br><br>
    <a href="ourwork.html" class="workbtn">SEE&nbsp;OUR&nbsp;WORK&nbsp;<i class="fa fa-angle-double-right"></i></a>

</div>

Answer 1

作者提供了一种解决方法，对我来说就是

$.fn.fullpage({
    scrollOverflow: false,
    afterRender: function(){
        $('#video')[0].play();      
    }
});

here（Github fullPage issue）是一个链接，您可以获取有关此问题的更多信息

Answer 2

您不再需要使用自动播放，甚至不需要使用afterRender回调来手动播放。

只需使用data-autoplay中有关嵌入媒体元素自动播放的详细信息即可。{/ p>

<audio data-autoplay>
    <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

通过这种方式，您还可以决定是否希望fullPage.js在sectino / slide leave上自动暂停（通过使用data-keepplaying或不使用）

HTML5视频自动播放不使用fullPage.js

2 个答案: