Chrome 使用 html5 视频和 fullpage.js 时出现错误。任何解决方案？

Question

在我的项目中，我在主页中使用 fullpage.js。

然后我想添加一个视频作为背景，但是视频忽略了 autoplay 选项并且无法启动。但是当你向下滚动一次然后再次向上滚动时它会发生。

它在 firefox 上运行良好（甚至在 IE 上！）。

您可以在 codepen

上看到此行为

chrome 版本：60.0.3112.113（官方构建）（64 位）

任何我可以添加到我的代码中以使其工作的东西，至少暂时？

非常感谢。

Answer 1

在 afterLoad 回调的末尾添加此语句。视频标签可能已准备好自动播放，但插件可能仍在渲染这些部分以满足其需要。加载插件时播放视频，请参见演示。

$('video')[0].play();

CODEPEN

演示

// variables
var $header_top = $('.header-top');
var $nav = $('nav');



// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});



// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],
  sectionSelector: '.vertical-scrolling',
  slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
  menu: '#menu',

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
      $('#fp-nav').hide();
    }
    $('video')[0].play();// <=======================[ADD THIS]
  },

  onLeave: function(index, nextIndex, direction) {
    if (index == 5) {
      $('#fp-nav').show();
    }
  },

  afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
    if (anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(false, 'up');
      $header_top.css('background', 'transparent');
      $nav.css('background', 'transparent');
      $(this).css('background', '#374140');
      $(this).find('h2').css('color', 'white');
      $(this).find('h3').css('color', 'white');
      $(this).find('p').css({
        'color': '#DC3522',
        'opacity': 1,
        'transform': 'translateY(0)'
      });
    }
  },

  onSlideLeave: function(anchorLink, index, slideIndex, direction) {
    if (anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(true, 'up');
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');
    }
  }
});

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);

/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: "untitled-font-1";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-up-open-big {
  display: inline-block;
}

.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  color: black;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.icon-up-open-big:hover:after {
  color: white;
}

.scroll-icon {
  position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}


/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.l-left {
  float: left;
}

.l-right {
  float: right;
}

.end {
  margin-top: 30px;
  font-size: 3em;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(300px);
  -ms-transform: translateY(300px);
  transform: translateY(300px);
  -webkit-transition: opacity, -webkit-transform 1s;
  transition: opacity, transform 1s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}


/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
  margin: 0;
  padding: 0;
  font-family: 'Alegreya Sans', Arial, sans-serif;
  text-transform: uppercase;
}

html {
  font-size: 62.5%;
}

body {
  color: black;
  letter-spacing: .18em;
}

a {
  text-decoration: none;
  color: white;
}

ul,
li {
  list-style-type: none;
}


/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.header-top {
  background: rgba(0, 47, 77, .3);
  height: 70px;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  box-sizing: border-box;
}

h1 {
  line-height: 70px;
  height: 70px;
}

h1 a {
  display: block;
  padding: 0 10px;
}

.toggle-menu {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  top: 10px;
}

.toggle-menu i {
  position: absolute;
  display: block;
  height: 2px;
  background: white;
  width: 30px;
  left: 10px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.toggle-menu i:nth-child(1) {
  top: 16px;
}

.toggle-menu i:nth-child(2) {
  top: 24px;
}

.toggle-menu i:nth-child(3) {
  top: 32px;
}

.open-menu i:nth-child(1) {
  top: 25px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.open-menu i:nth-child(2) {
  background: transparent;
}

.open-menu i:nth-child(3) {
  top: 25px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

nav {
  height: 0;
  opacity: 0;
  box-sizing: border-box;
  background: rgba(0, 47, 77, .25);
  position: fixed;
  top: 70px;
  width: 100%;
  -webkit-transition: all 3s;
  transition: all 3s;
}

.open-menu~nav {
  opacity: 1;
  padding: 80px 0;
  z-index: 15;
  height: calc(90vh - 70px);
}

nav ul {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

nav li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

nav li a {
  font-size: 2em;
  display: block;
  padding: 30px;
  text-align: center;
  -webkit-transition: background .3s;
  transition: background .3s;
}

nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
  background: #962D3E;
}

nav li:nth-child(even) a {
  background: #aa3346;
}

nav li:nth-child(odd) a:hover {
  background: #9e2f41;
}

nav li:nth-child(even) a:hover {
  background: #c53c52;
}

nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}


/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section {
  text-align: center;
  /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}

h2 {
  text-transform: lowercase;
  font-size: 4em;
  margin-bottom: 20px;
}

h3 {
  font-weight: 300;
  font-size: 2.8em;
}


/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: white;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: transparent;
  box-sizing: border-box;
  border: 1px solid #24221F;
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 767px) {
  nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  nav li {
    margin-top: 1px;
  }
  nav li a {
    font-size: 1.5em;
  }
  .scroll-icon {
    display: none;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  .open-menu~nav {
    padding: 20px 0;
  }
  nav li a {
    padding: 3px;
  }
}

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css' rel='stylesheet'>
<header>
  <div class="header-top clearfix">
    <h1 class="l-left"><a href="#firstSection">Your Logo</a></h1>
    <a class="l-right toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
  </div>

  <nav class="hide">
    <ul id="menu">
      <li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul>
  </nav>
</header>

<div id="fullpage">
  <section class="vertical-scrolling">
    <video autoplay loop class="fillWidth" style="height: 100%; object-fit: cover;">
                    <source  src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" type="video/mp4" />
                   </video>
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>This is the second section</h3>
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>This is the third section</h3>
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>This is the fourth section</h3>
  </section>
  <section class="vertical-scrolling">
    <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
    </div>
    <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the second slide</h3>
      <p class="end">Thank you!</p>
    </div>
  </section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js'></script>

Chrome 使用 html5 视频和 fullpage.js 时出现错误。任何解决方案？

Chrome bug while using html5 video and fullpage.js. Any solution?

javascript

jquery

html

google-chrome

fullpage.js

演示