ReactJS组件中显示的视频未更新 [英] Video displayed in ReactJS component not updating

问题描述

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

I'm new to ReactJS (0.13.1), and I've created a component in my app to display HTML5 video.

它似乎完美但只适用于第一个选择。当您从一个视频切换到另一个视频时（ this.props.video 更改时），页面中实际显示和播放的视频不会更改。

It seems to work perfectly but only for the first selection. The video that is actually displayed and playing in the page doesn't change when you switch from one video to another (when this.props.video changes).

我可以在Chrome中看到< source src ='blah.mp4'/> 元素更新检查员，但页面中实际渲染的视频不会改变，并且如果已经存在则继续播放。同样的事情发生在Safari& Firefox浏览器。所有其他元素也会相应更新。

I can see the <source src='blah.mp4' /> elements update in the Chrome inspector but the actually rendered video in the page doesn't change and keeps playing if it was already. Same thing happens in Safari & Firefox. All the other elements update appropriately as well.

任何想法？

无论如何我的组件如下：

Anyway my component below:

(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;
})();

更新：

将其描述为另一个方式：

To describe it another way:

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

I have a list of links with onClick handlers that set the props of the component.

我第一次点击视频链接（Video Foo）

When I click on a video link ("Video Foo") for the first time I get

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

和Video Foo出现并可以播放。

and "Video Foo" appears and can be played.

然后当我点击下一个（视频栏）时，DOM更新，我得到

Then when I click on the next one ("Video Bar") the DOM updates and I get

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

然而它仍然是Video Foo，可以看到并且可以播放。

However it is still "Video Foo" that is visible and can be played.

就像浏览器加载< video> 的媒体一样，它会忽略对<的所有更改; source> elements。

It's like once the browser has loaded media for a <video> it ignores any changes to the <source> elements.

推荐答案

找到答案

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

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach

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

这是一个非常hacky和脆弱，但它完成了我的案件工作。

It's a pretty hacky and fragile, but it got the job done for my cases.

(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;

})();

这篇关于ReactJS组件中显示的视频未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！