javascript - ReactJS 组件中显示的视频未更新

Question

我是 ReactJS (0.13.1) 的新手，我在我的应用程序中创建了一个组件来显示 HTML5 视频。

它似乎工作得很好，但只适用于第一次选择。当您从一个视频切换到另一个视频时(当 this.props.video 更改时)，页面中实际显示和播放的视频不会改变。

我可以看到 <source src='blah.mp4' />元素在 Chrome 检查器中更新，但页面中实际呈现的视频不会改变并继续播放(如果已经存在)。 Safari 和 Firefox 中也会发生同样的事情。所有其他元素也会适当更新。

有什么想法吗？

无论如何我的组件如下:

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var sourceNodes = video.media.map(function(media){
        media = 'content/'+media;
        return ( <source src={media} /> )
      });
      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (<li><a className="greybutton" href={media}>{ext}</a></li>)
      });

      return (

        <div className="video-container">
          <video title={title} controls width="100%">
            {sourceNodes}
          </video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox">
              <span>Downloads:</span>
              <ul className="downloadlinks">
                {downloadNodes}
              </ul>    
            </div>
        </div>

      )
    }
  });
  module.exports = VideoView;
})();

更新:

换一种说法:

我有一个链接列表，其中包含设置组件属性的 onClick 处理程序。

当我第一次点击视频链接(“Video Foo”)时，我得到了

<video title="Video Foo" controls>
  <source src="video-foo.mp4"/>
  <source src="video-foo.ogv"/>
</video>

出现“Video Foo”并可以播放。

然后，当我点击下一个(“视频栏”)时，DOM 更新，我得到

<video title="Video Bar" controls>
  <source src="video-bar.mp4"/>
  <source src="video-bar.ogv"/>
</video>

然而，可见且可以播放的仍然是“Video Foo”。

这就像一旦浏览器加载了 <video> 的媒体它忽略对 <source> 的任何更改元素。

Answer 1

我已经描述了一些纯 JavaScript 的方法 here .基于此，我找到了适合我的 React 解决方案:

• 使用 src视频本身的属性:

  var Video = React.createComponent({
    render() {
      return <video src={this.props.videoUrl} />;
    }
  });
  

  Dana's answer是扩展此解决方案的绝佳选择。

• 使用 .load()调用视频元素:

  var Video = React.createComponent({
    componentDidUpdate(_prevProps, _prevState) {
      React.findDOMNode(this.refs.video).load(); // you can add logic to check if sources have been changed
    },
  
    render() {
      return (
        <video ref="video">
          {this.props.sources.map(function (srcUrl, index) {
            return <source key={index} src={srcUrl} />;
          })}
        </video>
      );
    }
  });
  

更新:

• 当然可以添加唯一的 key <video> 的属性标签(例如基于您的来源)，因此当来源更改时，它也会更改。但是会导致<video>完全重新渲染，可能会导致一些 UI 闪烁。

  var Video = React.createComponent({
    render() {
      return (
        <video key={this.props.videoId}>
          {this.props.sources.map(function (srcUrl, index) {
            return <source key={index} src={srcUrl} />;
          })}
        </video>
      );
    }
  });