我想只播放一次介紹視頻，然后播放另一個回圈播放的視頻。我有這段代碼來檢測第一個視頻何時結束，但我如何加載第二個視頻并將其設定為回圈播放？
const vidIndex = 0;
const videos = [videoIntro, videoLoop];
return (
<div className="main">
<video src = {videos[vidIndex]} autoPlay muted onEnded={() => vidIndex } />
</div>
);
謝謝。
uj5u.com熱心網友回復：
您可以簡單地使用 auseState來跟蹤視頻索引。代碼沙盒
import { useEffect, useState, useRef } from "react";
const videoIntro = "https://www.w3schools.com/tags/movie.mp4";
const videoLoop =
"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
function App() {
const [vidIndex, setVidIndex] = useState(0);
const ref = useRef(null);
useEffect(() => {
if (vidIndex === 0 && ref.current) {
ref.current.play();
}
}, [ref, vidIndex]);
return (
<div className="main">
<video
style={{ display: vidIndex === 1 ? "none" : "block" }}
src={videoIntro}
autoPlay
muted
onEnded={() => setVidIndex((idx) => idx 1)}
/>
<video
style={{ display: vidIndex === 0 ? "none" : "block" }}
src={videoLoop}
muted
loop
ref={ref}
/>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/483353.html
標籤：javascript html 反应
上一篇：給void屬性賦予什么價值
下一篇：獲取上個月的日期范圍