javascript – 使用html5视频和fullpage.js时出现Chrome错误.有解决方案吗
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 使用html5视频和fullpage.js时出现Chrome错误.有解决方案吗，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9863字，纯文字阅读大概需要15分钟。
内容图文
在我的项目中,我在主页中使用fullpage.js.
然后我想添加一个视频作为背景,但视频忽略了自动播放选项,但它没有启动.但是当你向下滚动一次然后向上滚动时它会发生.
它在firefox上工作正常(甚至在IE上！).
您可以在此codepen上看到此行为
chrome版本：60.0.3112.113(Build oficial)(64位)
我可以添加到我的代码中以使其有效,至少暂时如何？
非常感谢.
解决方法:
在afterLoad回调结束时添加此语句.视频标签可能已准备好进行自动播放,但该插件可能仍在渲染这些部分以满足其需求.加载插件时播放视频,请参阅演示.
$('video')[0].play();
演示
// 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>内容总结
以上是互联网集市为您收集整理的javascript – 使用html5视频和fullpage.js时出现Chrome错误.有解决方案吗全部内容，希望文章能够帮你解决javascript – 使用html5视频和fullpage.js时出现Chrome错误.有解决方案吗所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】