reactjs - Video-React 是否支持来自 url 的视频流
问题描述
我想通过在 reactjs 中流式传输从其中一个 url 播放视频这是否支持Video-React有人可以帮助我。
解决方案
是的!在他们的文档中,您可以看到他们使用 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 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>
);
};
推荐阅读
- arrays - 从字典对象的键向 vbscript 中的动态数组添加值
- database - 应用程序启动时,Mnesia disc_copies 表如何存储在 ram 中?
- github - GitHub 桌面 - 如何将项目添加到存储库或分支?
- node.js - Google Places API 在 Google Cloud 上部署后返回 0 个结果
- hibernate-envers - 使用hibernate Envers,有没有办法从审计表中删除实体。符合 GDPR 要求
- flutter - Flutter - 当同一行中的另一个小部件灵活时,行中的文本溢出
- html - 在导航菜单中使用锚点
- mysql - 尽管条件返回零记录,但显示一条记录
- c++ - 如何将 SINGLE char 转换为系统字符串 C++?
- java - 使用spring cloud stream kafka读取消息的编程方式