[{
index: 0,
sentence: "This is a simple Javascript test",
media: "https://miro.medium.com/max/1024/1*OK8xc3Ic6EGYg2k6BeGabg.jpeg",
duration: 3
}, {
index: 1,
sentence: "Here comes the video!",
media: "https://media.gettyimages.com/videos/goodlooking-young-woman-in�casual-clothing-is-painting-in-workroom-video-id1069900546",
duration: 5
}]
Assume the response above is the 2 scenes data for an 8 seconds long 16:9 video. You are required to draw an HTML canvas to play those scenes in order. Expected output: the video will play, pause and stop when user click on the canvas. Extra efforts: ● Write in React hook to handle the playing state ● Play the video from 5th second when the second scene starts ● Text animations. Eg. typing text ● Scene transitions ● Play music in background