HTML5视频自动播放不工作与fullPage.js

HTML5 Video Autoplay not working with fullPage.js

本文关键字：fullPage js 工作 视频 自动播放 HTML5      更新时间：2023-09-26

好的，我已经尝试了几乎所有的方法，但我的代码中有些东西阻止了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>

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

请按照fullPage.js文档中关于自动播放嵌入媒体元素的详细说明使用data-autoplay。

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

这样你也可以决定是否想要fullPage.js在section/slide leave时自动暂停(通过使用data-keepplaying或不)

作者提供了一种解决方法，这个作品适合我

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

这里(Github fullPage issue)是一个链接，你可以获得更多关于这个问题的信息

相关文章：