Reactjs Video React是否支持来自url的视频流

我想在reactjs中通过流媒体播放其中一个url的视频。有人能帮我吗。

是的！在他们的文档中，您可以看到他们使用HLS流媒体创建源：

import React, { Component } from 'react';
import Hls from 'hls.js';

export default class HLSSource extends Component {
  constructor(props, context) {
    super(props, context);
    this.hls = new Hls();
  }

  componentDidMount() {
    // `src` is the property get from this component
    // `video` is the property insert from `Video` component
    // `video` is the html5 video element
    const { src, video } = this.props;
    // load hls video source base on hls.js
    if (Hls.isSupported()) {
      this.hls.loadSource(src);
      this.hls.attachMedia(video);
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    }
  }


  componentWillUnmount() {
    // destroy hls video source
    if (this.hls) {
      this.hls.destroy();
    }
  }

  render() {
    return (
      <source
        src={this.props.src}
        type={this.props.type || 'application/x-mpegURL'}
      />
    );
  }
}

import React，{Component}来自'React'；
从“Hls.js”导入Hls；
导出默认类HLSSource扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.hls=新的hls（）；
}
componentDidMount（）{
//`src`是从此组件获取的属性
//'video'是从'video'组件插入的属性
//'video'是html5视频元素
const{src，video}=this.props；
//基于hls.js加载hls视频源
如果（Hls.isSupported（））{
此.hls.loadSource（src）；
这个.hls.attachMedia（视频）；
this.hls.on（hls.Events.MANIFEST_解析，（）=>{
video.play（）；
});
}
}
组件将卸载（）{
//销毁hls视频源
if（this.hls）{
this.hls.destroy（）；
}
}
render（）{
返回(
);
}
}

并在代码中使用它：

import React from 'react';
import { Player } from 'video-react';
import HLSSource from './HLSSource';

export default (props) => {
  // Add customized HLSSource component into video-react Player
  // The Component with `isVideoChild` attribute will be added into video` component
  // Please use this url if you test it from local:
  // http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8
  return (
    <Player>
      <HLSSource
        isVideoChild
        src="//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
      />
    </Player>
  );
};

从“React”导入React；
从“视频反应”导入{Player}；
从“/HLSSource”导入HLSSource；
导出默认值（道具）=>{
//将自定义HLSSource组件添加到视频播放器中
//具有“isVideoChild”属性的组件将添加到“video”组件中
//如果从本地进行测试，请使用此url：
// http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8
返回(
);
};

Thank you@FrankerZ如果还有什么我要回去的，我会检查相同的。我尝试了这个，但得到了一个加载屏幕循环。即使在他们的演示中，它也会循环加载，这里和后面的问题也是如此