为啥我无法播放 React HTML5 视频组件？

Posted 2023-05-07

【中文标题】为啥我无法播放 React HTML5 视频组件？

【英文标题】：Why can I not get a React HTML5 video component to Play?为什么我无法播放 React HTML5 视频组件？

【发布时间】：2017-06-03 10:06:29

【问题描述】：

我试图在我的 React 应用程序的主页组件上添加一个连续的 html5 视频循环。我使用 NPM 包“react-html5video”来生成这个组件。当我通过 localhost 启动应用程序时，它最初看起来好像会播放，但是我在 div 中收到以下错误，“视频无法在此浏览器中播放”。我似乎无法弄清楚我做错了什么。

视频组件：

import React from 'react';
import Video from 'react-html5video';

export class VideoLoop extends React.Component 
render () 
return (
  <Video controls autoPlay loop muted>
    <source
    src="../src/videos/oakmont.mp4"
    type="video/mp4"
    />
  </Video>
  );
 
;

export default VideoLoop;

主页组件：

import React from 'react';
import VideoLoop from './video_loop';

export default () => 
return <div>
        Home Page
        <VideoLoop />
      </div>
;

路由

import React from 'react';
import  Route, IndexRoute  from 'react-router';
import App from './components/app';
import PropertyList from './components/property_list';
import HomePage from './components/home_page';
import AboutUs from './components/about_us';
import Contact from './components/contact';


export default (
<Route path="/" component=App>
  <IndexRoute component=HomePage />
  <Route path="properties"  component=PropertyList />
  <Route path="aboutus"  component=AboutUs />
  <Route path="contact"  component=Contact />
</Route>
);

【问题讨论】：

你在多个浏览器上试过了吗？

是的，我在 chrome、chrome incognito 和 safari 上试过。全部返回相同的错误。

您确定../src/videos/oakmont.mp4 指向的是正确的视频文件吗？

检查 devTools 中的网络选项卡，看看是否找到并加载了视频文件

【参考方案1】：

在 react 中播放视频非常简单。

// I 
import video from '../src/videos/a.mp4'
//In your component

//Add other tags as necessary
<video src=video> </video>

您不需要任何其他模块。

【讨论】：

如果我需要根据道具加载不同的视频怎么办？

视频未播放。仅显示图像。

这引导我走向正确的方向：semicolonworld.com/question/61335/…

【参考方案2】：

这对我有用：似乎它预加载源然后可以在页面上自动播放！---

import React from "react";

import video from '../Video/Teheran.mp4';


       <video controls autoPlay loop muted>
          <source src=video type="video/mp4" >
          </source>