0

Given this script:

<html>
<head>

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

function playVideo(myUrl, startTime, endTime) { 
  var video = document.getElementById("myVideo");
  video.src = myUrl;
  video.currentTime=startTime;
  video.play();

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

function myLoop(){
  I want to loop each pairs 5 times before jump to the next pair
}
</script>
</head>
<body>
<video id="myVideo" width="1000" height="800" controls autoplay loop>

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

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

</body>
</html>

Now I want to fill in myLoop function.

I want to loop each pairs 5 times before jump to the next pair in the array.

For example, -the first pair: 'journey27.mp4', loop "[1, 2]" 5 times

then the next pair: 'journey27.mp4', loop "[5, 7]" 5 times

then the next pair: 'journey28.mp4', loop "[10, 12]" 5 times

then the next pair: 'journey28.mp4', loop "[13, 17]" 5 times

and so on

Note: The playVideo function above works

How can I loop through this array using javascript?

Improve this question
2
  • 2
    MDN has a pretty good page about loops. What have you tried so far, and how have your attempts failed? Commented Aug 15, 2022 at 17:32
  • 1
    @Tom I don't think he actually wants a loop. I think each click on the button is supposed to play one video, but it's supposed to play the same video 5 times. Commented Aug 15, 2022 at 17:39

1 Answer 1

Reset to default
2

Use global variables to hold the current indexes and repetition count for the video. Increment the repetition count, and when reaches 5 increment the indexes.

There's no loop, the iteration happens when the user clicks the link.

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

function playVideo(myUrl, startTime, endTime) { 
  console.log(`Playing ${myUrl} from ${startTime} to ${endTime}`);
} 

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

function myLoop(){
  playVideo(sentences[video_index][0], sentences[video_index][1][time_index][0], sentences[video_index][1][time_index][1]);
  repeat++;
  if (repeat >= 5) {
    repeat = 0;
    time_index++;
    if (time_index >= sentences[video_index][1].length) {
      time_index = 0;
      video_index++;
    }
  }
}
<a href="#" onclick="myLoop()" > Play </a>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I think this overlooks the fact that each iteration needs to wait X seconds for the video to play. So, playVideo might need to return a Promise that resolves when the player reaches endTime, and myLoop would await each invocation before proceeding to the next.
Nothing is calling playVideo in a loop, it's only called when the user clicks the link.
Ah, I see that now. I do think that's a problem, because OP does explicitly state that they want the same segment to play 5 times in succession. It is possible that OP's question is ambiguous in this regard, and that they want the first 5 button presses to play the same segment, and then the next 5 button presses to play a different segment, etc. (Like how clicking on units repeatedly in Warcraft caused them to grow irate.) We'll see what OP has to say.
You're right, I didn't see "autoplay loop" in the code. I thought he wanted to start each video when clicked.
I am sorry, it should play "Playing journey27.mp4 from 1 to 2" 5 times, then it plays "Playing 'journey27.mp4' from 5 to 7" 5 times, then it plays "Playing 'journey28.mp4' from 10 to 12" 5 times and so on. However, your code just play "Playing journey27.mp4 from 1 to 2" forever. Can you update your code?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.