CODEWITHSUNDEEP
javascript
Tom
Tom

Reputation: 845

What did I do wrong with this Loop video playback (Javascript)?

Look at this code. I think I am almost done but there is a minor problem.

<html>
<head>

<script>
var sentences= 
[
 ['journey27.mp4', 
  [
    [1, 2],
    [5, 7]
  ]
 ],
 ['journey28.mp4', 
  [
    [10, 12],
    [13, 17],
    [25, 36]
  ]
 ],
 ['journey29.mp4', 
  [
    [13, 15],
    [15, 19],
    [21, 30]
  ]
 ]
];

let video_index = 0;
let time_index = 0;
let repeat = 0;



function playVideo(myUrl, startTime, endTime) { 
  document.getElementById("demo").innerHTML +=myUrl + " start:"+startTime+" end: "+endTime+"<br>";
  var video = document.getElementById("myVideo");
  video.src = 'video/'+myUrl;
  video.currentTime=startTime;
  video.play();

  var maxTime = endTime;
  video.addEventListener("timeupdate", function(){
    if(video.currentTime >= maxTime){
     myLoop();
     
    }
  }, false);

} 


function myLoop(){
  playVideo(sentences[video_index][0], sentences[video_index][1][time_index][0], sentences[video_index][1][time_index][1]);
  repeat++;
  if (repeat >= 3) {
    repeat = 0;
    time_index++;
    if (time_index >= sentences[video_index][1].length) {
      time_index = 0;
      video_index++;
    }
  }
}

</script>
</head>
<body>


<video id="myVideo" width="500" height="400" controls autoplay loop>

  Your browser does not support the video tag.
</video>

<br>
<a href="#" onclick="myLoop()" > Play </a>

<br>
<p id="demo"></p>
</body>
</html>

This is the requirement

I want to build an video app (using Javascript) that repeats each segment of a video 3 times before moving to the next segment.

There are many videos and each video has many segments.

The urllinks and segments are provided or pulled from database. They are constructed in a nested array.

When I click "play" once, the app should do all the following things:

The app should play the video "journey27.mp4", from second 1 to 2, 3 times. That means it should play from second 1 to 2 then when the second is > than 2, it gets back and start from second 1 again and then when the second is > than 2, it gets back and start from second 1 again and then when the second is > than 2, it jump to the next segment of video "journey27.mp4". That means it will do this

it plays "journey27.mp4" from 5 to 7, then
it plays "journey27.mp4" from 5 to 7, then
it plays "journey27.mp4" from 5 to 7, then it jumps to the next video

it plays "journey28.mp4" from 10 to 12, then
it plays "journey28.mp4" from 10 to 12, then
it plays "journey28.mp4" from 10 to 12, then it jumps to the next segment of the video "journey28.mp4" and

it plays "journey28.mp4" from 13 to 17, then
it plays "journey28.mp4" from 13 to 17, then
it plays "journey28.mp4" from 13 to 17, then it jumps to the next segment of the video "journey28.mp4" and

it plays "journey28.mp4" from 25 to 36, then

it plays "journey28.mp4" from 25 to 36, then
it plays "journey28.mp4" from 25 to 36, then it jumps to the next video

it plays "journey29.mp4" from 13 to 15, then
it plays "journey29.mp4" from 13 to 15, then
it plays "journey29.mp4" from 13 to 15, then it jumps to the next segment of "journey29.mp4"

and so on.

When playing this code, it plays the first segment correctly

it plays "journey27.mp4" from 1 to 2, then
it plays "journey27.mp4" from 1 to 2, then
it plays "journey27.mp4" from 1 to 2,

However, it doesn't repeat the second segment

What is wrong with it?

I think I need a few lines of code to fix it.

Upvotes: 1

Views: 62

Answers (1)

n--
n--

Reputation: 3856

The wrong is adding an event listener callback for timeupdate on each loop, so all those callbacks will run simultaneously and will conflict with each other. After fixing that, your code seems to work as expected:

<html>
<head>

<script>
var sentences= 
[
 [//'journey27.mp4', 
 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
  [
    [1, 2],
    [5, 7]
  ]
 ],
 [//'journey28.mp4', 
 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  [
    [10, 12],
    [13, 17],
    [25, 36]
  ]
 ],
 [//'journey29.mp4', 
 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4',
  [
    [13, 15],
    [15, 19],
    [21, 30]
  ]
 ]
];

let video_index = 0;
let time_index = 0;
let repeat = 0;

var video;
var maxTime;

document.addEventListener('DOMContentLoaded', () => {
  video = document.getElementById("myVideo");

  video.addEventListener("timeupdate", function(){
    if(video.currentTime >= maxTime){
      myLoop();
    }
  }, false);
});

function playVideo(myUrl, startTime, endTime) { 
  document.getElementById("demo").innerHTML +=myUrl + " start:"+startTime+" end: "+endTime+"<br>";
  
  // video.src = 'video/'+myUrl;
  video.src = myUrl;
  video.currentTime=startTime;
  video.play();
  maxTime = endTime;
} 


function myLoop(){
  if (!sentences[video_index]) {
    video.src = null;
    return;
  }
  playVideo(sentences[video_index][0], sentences[video_index][1][time_index][0], sentences[video_index][1][time_index][1]);
  repeat++;
  if (repeat >= 3) {
    repeat = 0;
    time_index++;
    if (time_index >= sentences[video_index][1].length) {
      time_index = 0;
      video_index++;
    }
  }
}

</script>
</head>
<body>


<video id="myVideo" width="500" height="400" controls autoplay loop>

  Your browser does not support the video tag.
</video>

<br>
<a href="#" onclick="myLoop()" > Play </a>

<br>
<p id="demo"></p>
</body>
</html>

Upvotes: 1

Related Questions