Alv*_*dez 5 javascript jquery html5 google-chrome fullpage.js
在我的项目中,我正在fullpage.js主页中使用.
然后我想添加一个视频作为背景,但视频忽略了该autoplay选项,它无法启动.但是当你向下滚动一次然后向上滚动时它会发生.
它在firefox上工作正常(甚至在IE上!).
您可以在此codepen上看到此行为
chrome版本:60.0.3112.113(Build oficial)(64位)
我可以添加到我的代码中以使其有效,至少暂时如何？
非常感谢.
在回调末尾添加此语句afterLoad。视频标签可能已准备好自动播放，但插件可能仍在渲染各个部分以满足其需要。加载插件时播放视频，请参阅演示。
$(\'video\')[0].play();\n$(\'video\')[0].play();\n// variables\r\nvar $header_top = $(\'.header-top\');\r\nvar $nav = $(\'nav\');\r\n\r\n\r\n\r\n// toggle menu \r\n$header_top.find(\'a\').on(\'click\', function() {\r\n $(this).parent().toggleClass(\'open-menu\');\r\n});\r\n\r\n\r\n\r\n// fullpage customization\r\n$(\'#fullpage\').fullpage({\r\n sectionsColor: [\'#B8AE9C\', \'#348899\', \'#F2AE72\', \'#5C832F\', \'#B8B89F\'],\r\n sectionSelector: \'.vertical-scrolling\',\r\n slideSelector: \'.horizontal-scrolling\',\r\n navigation: true,\r\n slidesNavigation: true,\r\n controlArrows: false,\r\n anchors: [\'firstSection\', \'secondSection\', \'thirdSection\', \'fourthSection\', \'fifthSection\'],\r\n menu: \'#menu\',\r\n\r\n afterLoad: function(anchorLink, index) {\r\n $header_top.css(\'background\', \'rgba(0, 47, 77, .3)\');\r\n $nav.css(\'background\', \'rgba(0, 47, 77, .25)\');\r\n if (index == 5) {\r\n $(\'#fp-nav\').hide();\r\n }\r\n $(\'video\')[0].play();// <=======================[ADD THIS]\r\n },\r\n\r\n onLeave: function(index, nextIndex, direction) {\r\n if (index == 5) {\r\n $(\'#fp-nav\').show();\r\n }\r\n },\r\n\r\n afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {\r\n if (anchorLink == \'fifthSection\' && slideIndex == 1) {\r\n $.fn.fullpage.setAllowScrolling(false, \'up\');\r\n $header_top.css(\'background\', \'transparent\');\r\n $nav.css(\'background\', \'transparent\');\r\n $(this).css(\'background\', \'#374140\');\r\n $(this).find(\'h2\').css(\'color\', \'white\');\r\n $(this).find(\'h3\').css(\'color\', \'white\');\r\n $(this).find(\'p\').css({\r\n \'color\': \'#DC3522\',\r\n \'opacity\': 1,\r\n \'transform\': \'translateY(0)\'\r\n });\r\n }\r\n },\r\n\r\n onSlideLeave: function(anchorLink, index, slideIndex, direction) {\r\n if (anchorLink == \'fifthSection\' && slideIndex == 1) {\r\n $.fn.fullpage.setAllowScrolling(true, \'up\');\r\n $header_top.css(\'background\', \'rgba(0, 47, 77, .3)\');\r\n $nav.css(\'background\', \'rgba(0, 47, 77, .25)\');\r\n }\r\n }\r\n});@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);\r\n\r\n/* ICON STYLES - ICON FROM: http://fontastic.me/\r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n@font-face {\r\n font-family: "untitled-font-1";\r\n src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");\r\n 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");\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n\r\n[class^="icon-"]:after,\r\n[class*=" icon-"]:after {\r\n font-family: "untitled-font-1";\r\n font-style: normal;\r\n font-weight: normal;\r\n font-variant: normal;\r\n text-transform: none;\r\n speak: none;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.icon-up-open-big {\r\n display: inline-block;\r\n}\r\n\r\n.icon-up-open-big:after {\r\n content: "a";\r\n font-size: 2.5em;\r\n display: block;\r\n -webkit-transform: rotateX(180deg);\r\n transform: rotateX(180deg);\r\n color: black;\r\n -webkit-transition: color .3s;\r\n transition: color .3s;\r\n}\r\n\r\n.icon-up-open-big:hover:after {\r\n color: white;\r\n}\r\n\r\n.scroll-icon {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 30px;\r\n padding: 0 10px;\r\n -webkit-transform: translateX(-50%);\r\n -ms-transform: translateX(-50%);\r\n transform: translateX(-50%);\r\n}\r\n\r\n\r\n/* HELPER CLASSES\r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n.clearfix:before,\r\n.clearfix:after {\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.clearfix:after {\r\n clear: both;\r\n}\r\n\r\n.l-left {\r\n float: left;\r\n}\r\n\r\n.l-right {\r\n float: right;\r\n}\r\n\r\n.end {\r\n margin-top: 30px;\r\n font-size: 3em;\r\n font-weight: bold;\r\n opacity: 0;\r\n -webkit-transform: translateY(300px);\r\n -ms-transform: translateY(300px);\r\n transform: translateY(300px);\r\n -webkit-transition: opacity, -webkit-transform 1s;\r\n transition: opacity, transform 1s;\r\n -webkit-transition-delay: 1s;\r\n transition-delay: 1s;\r\n}\r\n\r\n\r\n/* RESET-GENERAL STYLES\r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n font-family: \'Alegreya Sans\', Arial, sans-serif;\r\n text-transform: uppercase;\r\n}\r\n\r\nhtml {\r\n font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n color: black;\r\n letter-spacing: .18em;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n color: white;\r\n}\r\n\r\nul,\r\nli {\r\n list-style-type: none;\r\n}\r\n\r\n\r\n/* NAV STYLES\r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n.header-top {\r\n background: rgba(0, 47, 77, .3);\r\n height: 70px;\r\n padding: 0 10px;\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n z-index: 12;\r\n box-sizing: border-box;\r\n}\r\n\r\nh1 {\r\n line-height: 70px;\r\n height: 70px;\r\n}\r\n\r\nh1 a {\r\n display: block;\r\n padding: 0 10px;\r\n}\r\n\r\n.toggle-menu {\r\n width: 50px;\r\n height: 50px;\r\n display: inline-block;\r\n position: relative;\r\n top: 10px;\r\n}\r\n\r\n.toggle-menu i {\r\n position: absolute;\r\n display: block;\r\n height: 2px;\r\n background: white;\r\n width: 30px;\r\n left: 10px;\r\n -webkit-transition: all .3s;\r\n transition: all .3s;\r\n}\r\n\r\n.toggle-menu i:nth-child(1) {\r\n top: 16px;\r\n}\r\n\r\n.toggle-menu i:nth-child(2) {\r\n top: 24px;\r\n}\r\n\r\n.toggle-menu i:nth-child(3) {\r\n top: 32px;\r\n}\r\n\r\n.open-menu i:nth-child(1) {\r\n top: 25px;\r\n -webkit-transform: rotateZ(45deg);\r\n transform: rotateZ(45deg);\r\n}\r\n\r\n.open-menu i:nth-child(2) {\r\n background: transparent;\r\n}\r\n\r\n.open-menu i:nth-child(3) {\r\n top: 25px;\r\n -webkit-transform: rotateZ(-45deg);\r\n transform: rotateZ(-45deg);\r\n}\r\n\r\nnav {\r\n height: 0;\r\n opacity: 0;\r\n box-sizing: border-box;\r\n background: rgba(0, 47, 77, .25);\r\n position: fixed;\r\n top: 70px;\r\n width: 100%;\r\n -webkit-transition: all 3s;\r\n transition: all 3s;\r\n}\r\n\r\n.open-menu~nav {\r\n opacity: 1;\r\n padding: 80px 0;\r\n z-index: 15;\r\n height: calc(90vh - 70px);\r\n}\r\n\r\nnav ul {\r\n padding: 0 10px;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\nnav li {\r\n -webkit-box-flex: 1;\r\n -webkit-flex: 1;\r\n -ms-flex: 1;\r\n flex: 1;\r\n}\r\n\r\nnav li a {\r\n font-size: 2em;\r\n display: block;\r\n padding: 30px;\r\n text-align: center;\r\n -webkit-transition: background .3s;\r\n transition: background .3s;\r\n}\r\n\r\nnav li:nth-child(odd) a,\r\nbody.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {\r\n background: #962D3E;\r\n}\r\n\r\nnav li:nth-child(even) a {\r\n background: #aa3346;\r\n}\r\n\r\nnav li:nth-child(odd) a:hover {\r\n background: #9e2f41;\r\n}\r\n\r\nnav li:nth-child(even) a:hover {\r\n background: #c53c52;\r\n}\r\n\r\nnav li.active a,\r\nbody.fp-viewing-fifthSection-1 #menu li:last-child a {\r\n background: #453659;\r\n}\r\n\r\n\r\n/* SECTION STYLES - fullPage.js \r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\nsection {\r\n text-align: center;\r\n /*background: url(\'https://unsplash.it/1910/1221?image=626\') no-repeat center / cover;*/\r\n}\r\n\r\nh2 {\r\n text-transform: lowercase;\r\n font-size: 4em;\r\n margin-bottom: 20px;\r\n}\r\n\r\nh3 {\r\n font-weight: 300;\r\n font-size: 2.8em;\r\n}\r\n\r\n\r\n/* SLIDENAV STYLES - fullPage.js \r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n#fp-nav ul li a span,\r\n.fp-slidesNav ul li a span {\r\n background: white;\r\n width: 8px;\r\n height: 8px;\r\n margin: -4px 0 0 -4px;\r\n}\r\n\r\n#fp-nav ul li a.active span,\r\n.fp-slidesNav ul li a.active span,\r\n#fp-nav ul li:hover a.active span,\r\n.fp-slidesNav ul li:hover a.active span {\r\n width: 16px;\r\n height: 16px;\r\n margin: -8px 0 0 -8px;\r\n background: transparent;\r\n box-sizing: border-box;\r\n border: 1px solid #24221F;\r\n}\r\n\r\n\r\n/* MQ STYLES\r\n\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93 */\r\n\r\n@media screen and (max-width: 767px) {\r\n nav ul {\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: column;\r\n -ms-flex-direction: column;\r\n flex-direction: column;\r\n }\r\n nav li {\r\n margin-top: 1px;\r\n }\r\n nav li a {\r\n font-size: 1.5em;\r\n }\r\n .scroll-icon {\r\n display: none;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 400px) {\r\n html {\r\n font-size: 50%;\r\n }\r\n .open-menu~nav {\r\n padding: 20px 0;\r\n }\r\n nav li a {\r\n padding: 3px;\r\n }\r\n}