React网站直播时不显示视频.仅适用于Firefox

我试图在我的标题中的div上插入一个视频背景，它在我的本地服务器上工作。但是每当我在服务器上部署它时，它就会变黑并显示

DevTools无法加载源映射:无法加载chrome-extension的内容://gighmpiobklfepjocnamegkkbiglidom/browser-poly fill . js . map:系统错误:net::ERR_FILE_NOT_FOUND

我已经尝试在我的。htaccess

同样，我也试图禁用JavaScript源地图和CSS源地图，但div仍然是黑色的。因为我的视频和代码中的每个媒体文件都在我的build文件夹中。所以我不明白为什么它告诉我它不存在或者找不到它。此外，我删除了最后一行(//# sourceMappingURL = main . c0dd 6000 . js . map ),但它仍然不能像本答案中建议的那样播放视频(如何修复& quotDevTools无法加载SourceMap:无法加载内容& quot添加JavaScript库时出错？)不过，代码如下:

import React from 'react';
    import './header.css';
    import Typewriter from 'typewriter-effect';
// ------------NEW STYLE----------------import {
 Parallax, ParallaxBanner, ParallaxBannerLayer }
     from 'react-scroll-parallax';
    import video_bg from '../../assets/bg_video1.mp4';
    import textil from '../../assets/Guatemala/textil2.jpg';
    import tree from '../../assets/Guatemala/tree.png';
import {
 Circle }
     from '../../icons';
import {
 CircleRings }
     from '../../icons';
    const Header = () =>
 {
      return (    >
        div className='RO__header section__padding' >
          div className='RO__header-content'>
            h1 className='content_text-1'>
              I’m         /h1>
            div className='content_text-effect'>
                    Typewriter             options={
{
              strings: ['an Engineer', 'a Data Scientist', 'a Web Developer'],              autoStart: true,              loop: true,            }
}
              />
            /div>
            h1 className='content_text-2'>
              here to help you turn your business into something greater        /h1>
          /div>
        /div>
        div className='RO__Parallax'>
          div className='RO__Parallax_background'>
        {
/* ParallaxBanner           layers={
[            {
 image: textil, speed: -30}
          ]}
    >
            /ParallaxBanner>
 */}
        video           src = {
video_bg}
     autoPlay loop           className='RO__Parallax_foreground-video'/>
           /div>
          div className='RO__Parallax_foreground'>
        ParallaxBanner         layers={
[          ,          {
                speed: -15,            children: (              div className='RO__Parallax_foreground-title'>
                      h1>
    R A F A E L/h1>
                    /div>
            ),          }
        ]}
    >
            /ParallaxBanner>
                   /div>
        /div>
        div className='RO__Overlap'>
      Parallax        translateY={
[-50, 50]}
        translateX={
[-10, 90]}
    >
            Circle className='RO__Overlap-Circle' />
          /Parallax>
      Parallax         translateY={
[-50, 50]}
        translateX={
[10, -90]}
        rotate={
[-360,0]}
    >
            CircleRings className='RO__Overlap-circleRings' />
          /Parallax>
        /div>
            />
  )}
    export default Header

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！