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?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.