我是ReactJS(0.13.1)的新手,并且在我的应用程序中创建了一个组件来显示HTML5视频。
它似乎完美运行,但仅适用于第一选择。从一个视频切换到另一个视频时(this.props.video更改时),页面中实际显示和播放的视频不会改变。
this.props.video
我可以<source src='blah.mp4' />在Chrome检查器中看到元素更新,但是页面中实际渲染的视频没有改变,如果已经播放,则继续播放。Safari和Firefox中也会发生相同的情况。所有其他元素也会适当更新。
<source src='blah.mp4' />
有任何想法吗?
无论如何我下面的组件:
(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>元素的任何更改。
<video>
<source>
找到了答案
如果已将元素插入视频或音频元素中,则动态修改源元素及其属性将无效。要更改正在播放的内容,只需直接在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; })();