如何将视频播放器与 React-JSX 集成？

Question

我是 React/JSX 和自己编码的新手。这就是为什么起初：对不起，如果我的问题可能没有帮助我的人应该那么精确。

目前我正在构建一个网络应用程序作为我的考试项目。现在我需要集成一个视频播放器，但我能找到的似乎都不适合我的代码。我正在使用视觉工作室代码和 npm。我已经“npm install(ed)react-player” 现在回答我的问题。谁能提供一个简单的例子来说明如何将一个简单的视频播放器作为一个组件集成到我的主应用程序中？

我尝试编写一个“播放器”类作为外部组件。然后我想将它集成到我的 main-apps 渲染方法中。但是如果我查看浏览器检查器，我找不到我的标签。

*import React from 'react';      
import ReactPlayer from 'react-player';

export default class Player extends React.Component {   
constructor(props){   
  super(props);   
  this.........*

我只想让播放器出现在我的页面上。

Answer 1

来自video-react网站的例子：

 return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        />
      );

Answer 2

找到下面的工作代码。 CodeSandbox here

参考 - 刚刚遵循 react-player 文档。

App.js

import React from "react";
import ReactDOM from "react-dom";
import Player from "./Player";

function App() {
  return (
    <div className="App">
      <Player src="https://www.youtube.com/watch?v=sBws8MSXN7A" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

播放器.js

import React, { Component } from "react";
import ReactPlayer from "react-player";

export default class Player extends Component {
  render() {
    return (
      return <ReactPlayer url={this.props.src} playing />;
    );
  }
}

希望对你有帮助！！！