All geek questions in one place

Chrome error when using html5 video and fullpage.js. Any solution?

In my project I use fullpage.json the home page.

Then I want to add the video as a background, however the video ignores the parameter autoplayand it does not start. but this happens when you scroll down once and then up again.

It works fine on firefox (and even on IE!).

You can see this behavior on this codepen

chrome version: 60.0.3112.113 (Build oficial) (64 bit)

What could I add to my code so that it works, at least temporarily?

Many thanks.

+4
source share
1

afterLoad. , , , - . , . .

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

CODEPEN

Demo

// 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>
+3

Source: https://habr.com/ru/post/1685439/

More articles:


All Articles