0

我是 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.........*

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

4

2 回答 2

1

找到下面的工作代码。代码沙箱在这里

参考 - 只是遵循react-player文档。

应用程序.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 />;
    );
  }
}

希望能帮助到你！！！

于 2019-08-19T12:50:18.757 回答
0

来自 video-react 网站的示例： 

 return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        />
      );
于 2019-08-19T12:47:26.867 回答