reactjs - 从 React 播放视频
问题描述
我想通过单击 React 中的图像通过 url 播放视频。图像信息和 url 均取自数据库。
handleValueChange=(e)=> {
this.setState({
inputVideoUrl: e.target.name
});
this.player.load(); }
render(){
const { classes } = this.props;
return (
<div className={classes.root}>
<Grid container spaceing={60}>
{this.state.vods?
this.state.vods.map(c =>(
<Grid item xs={30}>
<Paper className={classes.paper}>
<Grid container spacing={30}>
<Grid item xs={30} sm container>
<Grid item xs container direction="column" spacing={30}>
<Grid item xs>
<ButtonBase className={classes.image}>
<img className={classes.img} alt="complex" src={c.vod_thumbnail} name={c.vod_path} onChange={this.handleValueChange}/>
</ButtonBase>
<Typography gutterBottom variant="subtitle1">
{c.roomname}
</Typography>
<Typography gutterBottom>{c.presenterId}</Typography>
</Grid>
<Grid item>
<Typography style={{ cursor: 'pointer' }}>delete</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
)):
<CircularProgress className={classes.progress} variant="determinate" value={this.state.completed} />
}
</Grid>
<Player><source src={this.state.inputVideoUrl} /></Player>
</div>
)
}
但视频无法播放。
解决方案
如果您确定视频路径和服务器端内容,请尝试以下操作:
handleValueChange=(e)=> {
this.setState({
inputVideoUrl: e.target.name
}, () => {
this.player.load();
});
}
推荐阅读
- excel - 使用找到的行单元格和找到的列单元格查找单元格
- flutter - 为什么在 Flutter 中使用 onGenerateRoute() 与 ModalRoute.of()?
- php - PHP中Prepared SQL语句的执行方法出错?
- python - 为什么我收到 TypeError: 'int' object is not iterable?
- apache - 如何将端口 8080、8000 上的调用重写为端口 80
- node.js - Fargate 返回预签名 S3 URL 的根域 - 节点
- node.js - How to correct IISNode HTTP 500 substatus 1002 process request error
- python - 如何使用 Python 将 Visual FoxPro 数据库导出到其他数据库?
- javascript - 为什么我的“mapDispatchToProps”找不到我的动作函数?
- docker - 我想使用一些从 ubuntu 到 alpine 的包