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

Question

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

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

Answer 1

I have described some approaches for plain JavaScript here . Based on that I have found solutions for React which work for me:

• using src attribute on video itself:

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

  Dana's answer is a great option extending this solution.

• using .load() call on video element:

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

UPD :

• of course it's possible to add unique key attribute for <video> tag (for example based on your sources), so when sources will change it will be changed as well. But it will cause <video> to be re-rendered completely and it may cause some UI flashes.

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

Answer 2

Found the answer

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

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;

})();

Answer 3

I faced the same issue and I didn't have access to the <video> HTML tag as I was using a library to render the video (not the native <video> HTML tag) which is internally responsible for rendering the <video> tag.

In this case I have found another solution which I think is better to solve the same issue.

Before:

<VideoLibrary src={this.props.src} />

After:

<React.Fragment key={this.props.src}>
  <VideoLibrary src={this.props.src} />
</React.Fragment>

Or this if you're using the native <video> HTML tag:

<React.Fragment key={this.props.src}>
  <video src={this.props.src} />
</React.Fragment>

This way React will render different video tags because the src prop will be different hence rendering a different HTML tag each time to avoid this issue.

I find this way cleaner and simpler and will work in both cases if you have or don't have access to the <video> HTML tag.

Answer 4

I had the same problem with making a playlist with videos.

So I separated the video player to another react component and that component received two props: contentId (video identify) & videoUrl (video URL).

Also I added a ref to the video tag so I can manage the tag.

var Video = React.createClass({
    componentWillReceiveProps (nextProps) {
        if (nextProps.contentId != this.props.contentId) {
            this.refs['videoPlayer'].firstChild.src = this.props.videoUrl;
            this.refs['videoPlayer'].load()
        }
    },
    propType: {
        contentId: React.PropTypes.string, // this is the id of the video so you can see if they equal, if not render the component with the new url 
        videoUrl: React.PropTypes.string, // the video url
    } ,
    getDefaultProps(){
        return {
        };
    },
    render() {
        return (
            <video ref="videoPlayer" id="video" width="752" height="423">
                <source src={this.props.videoUrl} type="video/mp4" />
            </video>
        );
    }
});

module.exports = Video;

this is much more clean:

<Video contentId="12" videoUrl="VIDEO_URL" />

Answer 5

Try this way

import React, { Component } from "react";

class Video extends Component<any, any> {

  video: any = React.createRef();

  componentDidUpdate(preProps: any) {
    const { url } = this.props;
    if (preProps && preProps.url && url) {
      if (preProps.url !== url) {
        this.video.current.src = url;
      }
    }
  }

  render() {
    const { url } = this.props;
    return (
      <video controls ref={this.video}>
        <source src={url} type="video/mp4" />
        Your browser does not support HTML5 video.
      </video>
    );
  }
}

Answer 6

尝试删除源标签，而只有视频标签，并像这个例子一样向它添加 src 属性

<video src={video} className="lazy" loop autoPlay muted playsInline poster="" />

Answer 7

If you are getting the data from server and you want it to update the video link once you have new data.

    import React, {Fragment, useEffect, useState} from "react";
    const ChangeVID =(props)=> {
     
    const [prevUploaded, setPrevUploaded] =useState(null);
    useEffect(()=>{
    if(props.changeIMG) {
    setPrevUploaded(props.changeIMG)}

},[])
    return(<Fragment>
            {prevUploaded && <Suspense
                        fallback={<div>loading</div>}>
                        <div className="py-2" >
                            { <video id={prevUploaded.duration} width="320" height="240" controls >
                                        <source src={prevUploaded.url} type="video/mp4" />
                                    </video>}
        
                        </div>
                    </Suspense>
                    }<);
    }

Answer 8

Based on evilguc's answer , I was able to fix a video update for my situation ( iframe instead of video tag).

In my case, the problem was with initial loading only. It worked perfectly when the user changed the language manually, but with the initial load when language is detected with navigator.language , the src prop was not updated.

In case someone is struggling with Vimeo video and functional components, this is my implementation:

const videoURL = {
  en: "https://player.vimeo.com/video/{VIDEO-ID-EN}?h=88a8c88888&badge=0&autopause=0&player_id=0&app_id={YOUR-APP-ID}",
  ru: "https://player.vimeo.com/video/{VIDEO-ID-RU}?h=88b8d88888&badge=0&autopause=0&player_id=0&app_id={YOUR-APP-ID}",
};
    export const Video = ({ language }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    ReactDOM.findDOMNode(videoRef.current).src = videoURL[language];
  });

  return (
    <div>
      <div style={{ padding: "56.25% 0 0 0", position: "relative" }}>
        <iframe
          ref={videoRef}
          src={videoURL[language]}
          frameBorder="0"
          allow="autoplay; fullscreen; picture-in-picture"
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
          }}
          title={i18n[language].videoTitle}
        ></iframe>
      </div>
      <script src="https://player.vimeo.com/api/player.js"></script>
    </div>
  );
};