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

小编典典

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

reactjs

我是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>元素的任何更改。

阅读 247

2020-07-22

共1个答案

小编典典

找到了答案

如果已将元素插入视频或音频元素中，则动态修改源元素及其属性将无效。要更改正在播放的内容，只需直接在media元素上使用src属性，可能使用canPlayType（）方法从可用资源中进行选择。通常，在解析文档之后手动操作源元素是不必要的复杂方法

https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-
element

这是一个很容易破解的程序，但是对于我来说，它已经完成了工作。

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

  var VideoView = React.createClass({

    pickSource: function(media){
      var vid = document.createElement('video');

      var maybes = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'maybe');
      });

      var probablies = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'probably');
      });

      var source = '';

      if (maybes.length > 0) { source = maybes[0]; }
      if (probablies.length > 0) { source = probablies[0]; }
      source = (source === '')? '' : 'content/'+source;
      return source;
    },

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

      var src = this.pickSource(video.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} src={src} controls width="100%"></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;

})();

2020-07-22