React 视频元素无法正常工作

Posted 2023-05-08

【中文标题】React 视频元素无法正常工作

【英文标题】：React video element is not working properly

【发布时间】：2020-04-27 11:08:22

【问题描述】：

我正在尝试将视频背景放在我的网站上，但是当我将视频标签添加到我的 react 脚本时，它开始在 Firefox 上无休止地加载，当我在 chrome 上尝试它时，它会在 0 秒时显示视频，我已经尝试过 .mp4和.mov 格式没有成功。

import React,  Component  from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";

class App extends Component 
  render() 
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src="hd1992.mov" type="video/mov"></source>
        </video>
      </div>
    );
  

export default App;

【问题讨论】：

Firefox 和 chrome 的控制台中是否显示任何错误？如果是，请编辑您的帖子并将它们添加到那里，以便我们可以更好地为您提供帮助。

不，控制台或网络检查工具中没有错误

我尝试播放从 YouTube 链接的视频，当我使用 iframe 时一切正常，但我需要它作为背景，所以这是没有意义的。

我不知道为什么，但是当我将此代码放入 javascript 文件时，它可以工作 <video autoplay muted loop name="media"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4" ></source> </video>

看来我播放视频的唯一方法就是链接它

【参考方案1】：

这与视频文件类型.mov 和您导入视频的方式有关。

尝试将您的 type 属性更改为 type="video/mp4"，即使它是 .mov 并导入您的视频，如下所示：

import React,  Component  from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";
import myVideo from "./hd1992.mov";

class App extends Component 
  render() 
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src=myVideo type="video/mp4"></source>
        </video>
      </div>
    );
  


export default App;

Here 是一个工作示例。

希望这能解决您的问题。

【讨论】：

我不知道为什么，但是当我这样做时 <video src='video url' /> 它不起作用。但是，当我像你一样导入它时，它可以工作，谢谢伙计

【参考方案2】：

同样的问题，

尝试了您的解决方案 Michalis，但它只是显示一个黑暗的播放器，即使设置了自动播放也不会加载任何视频。我必须安装 react-video 或类似的东西吗？

这是我的代码

import React from 'react'

import myVideo from "./bgvideo.mov";

import './cours.css'

function Cours() 
    return (
        <div className='cours-container'>
            <div className='cours-title'>Debuter en Programmation</div>

            <div className='onglets'>
                <div className='onglet-presentation'>Présentation</div>
                <div className='onglet-ressources'>Ressources</div>
            </div>

            <div className='text-container'>
                <video controls autoPlay loop muted>
                    <source src=myVideo type="video/mp4"></source>
                </video>
            </div>

        </div>
    )


export default Cours