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

Question

我是 React/JSX 的完全新手，并且会自己编码。这就是为什么一开始：抱歉，如果我的问题可能没有帮助我的人那么准确。

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

我尝试编写一个 class "Player" 作为外部组件。然后我想将它集成到我的主应用程序渲染方法中。但是如果我查看浏览器检查器，我找不到我的标签。

*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);

Player.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 />;
    );
  }
}

希望对您有所帮助！！！

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

How can i integrate a Video-Player with React-JSX?

javascript

jsx

reactjs

react-player