我想更新 HTML5 视频元素中的源标签,以便当我单击按钮时,正在播放的任何内容都会切换到新视频。
我有一个 Clip 组件,它返回一个 HTML5 视频元素,并通过 props 提供源 URL。
function Clip(props) {
return (
<video width="320" height="240" controls autoPlay>
<source src={props.url} />
</video>
)
}
我还有一个 Movie 组件,其中包含多个 URL,每个 URL 对应于电影的一个部分。它还包含一个位置属性,它的作用就像一个迭代器,通过记住当前正在播放的部分。
class Movie extends Component {
constructor() {
super();
this.state = {
sections: [
'https://my-bucket.s3.amazonaws.com/vid1.mp4',
'https://my-bucket.s3.amazonaws.com/vid2.mp4'
],
position: 0
};
}
render() {
const sections = this.state.sections
const position = this.state.position
return (
<div>
{position}
<Clip url={sections[position]} />
<button onClick={() => this.updatePosition()}>Next</button>
</div>
)
}
updatePosition() {
const position = this.state.position + 1;
this.setState({ position: position });
}
}
Movie 组件呈现一个 Clip 组件和一个“Next”按钮。单击“下一步”按钮时,我想更新位置属性并使用部分中的下一个 URL 重新渲染 HTML5 视频元素。
截至目前,当我点击“下一步”时,HTML5 视频源标签会更新,但该元素会继续播放之前 URL 中的视频。谁能帮我弄清楚如何重置视频元素?
Update:我创建了一个JSFiddle,你可以看到here.
更新2:更新视频元素上的 src 属性有效!
快速而肮脏的答案: Add a key
支撑<Clip>
or <video>
, e.g.:
function Clip({ url }) {
return (
<video key={url}>
<source src={url} />
</video>
);
}
推荐答案:触发一个load
每当有新 URL 时,视频元素就会发生事件,例如:
function Clip({ url }) {
const videoRef = useRef();
useEffect(() => {
videoRef.current?.load();
}, [url]);
return (
<video ref={videoRef}>
<source src={url} />
</video>
);
}
解释:视频最初不会改变,因为本质上你只是修改了<source>
element 和 React 都明白<video>
应保持不变,因此它不会在 DOM 上更新它,也不会触发新的load
该源的事件。一个新的load
事件应该被触发<video>
.
肮脏的答案有效,因为当你改变key
对于 React 元素,React 认为这是一个全新的元素。然后它在 DOM 中创建一个新元素,该元素自然会在挂载时触发自己的加载事件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)