Question

我想通过在React中单击图像来通过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>
      )
}

但是视频无法播放。

Answer 1

如果您确定视频路径和服务器端内容，请尝试以下操作：

handleValueChange=(e)=> {
  this.setState({
    inputVideoUrl: e.target.name
  }, () => {
    this.player.load();  
  });

}

播放来自React的视频

1 个答案: