javascript - Chrome bug while using html5 video and fullpage.js. Any solution? -
on project i'm using fullpage.js in home page.
then want add video background, video ignoring autoplay option , doesn't start. when scroll down once , again.
it working fine on firefox (and on ie!).
you can see behaviour on codepen
chrome version: 60.0.3112.113 (build oficial) (64 bits)
anything add code make works, @ least temporally?
thanks lot.
add statement @ end of afterload callback. the video tag may ready autoplay, plugin still rendering sections suit it's needs. video plays when plugin loaded, see demo.
$('video')[0].play(); 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; } { 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 { display: block; padding: 0 10px; } .toggle-menu { width: 50px; height: 50px; display: inline-block; position: relative; top: 10px; } .toggle-menu { position: absolute; display: block; height: 2px; background: white; width: 30px; left: 10px; -webkit-transition: .3s; transition: .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: 3s; transition: 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 { 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) { background: #962d3e; } nav li:nth-child(even) { 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 { 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 span, .fp-slidesnav ul li 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 , (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 { font-size: 1.5em; } .scroll-icon { display: none; } } @media screen , (max-width: 400px) { html { font-size: 50%; } .open-menu~nav { padding: 20px 0; } nav li { 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 second section</h3> </section> <section class="vertical-scrolling"> <h2>fullpage.js</h2> <h3>this third section</h3> </section> <section class="vertical-scrolling"> <h2>fullpage.js</h2> <h3>this fourth section</h3> </section> <section class="vertical-scrolling"> <div class="horizontal-scrolling"> <h2>fullpage.js</h2> <h3>this fifth section , contains first slide (actually section == first slide)</h3> </div> <div class="horizontal-scrolling"> <h2>fullpage.js</h2> <h3>this 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>
Comments
Post a Comment