Создание кнопки цикла в html-видео

#javascript #html

#javascript #HTML

Вопрос:

Итак, я хочу создать кнопку, которая зацикливает видео, у меня уже есть кнопки для воспроизведения / паузы, и сделать видео больше и меньше.

https://imgur.com/a/1afc1CZ.jpg

 <div style="text-align:center"> 
    <video id="video1" width="420">
        <source src="video/yt-video-i-do-not.mp4" type="video/mp4">       
    </video>
    <br><br>
    <button onclick="playPause()">Play/Pause</button> 
    <button onclick="loop()">Loop</button>
    <button onclick="makeBig()">Big</button>
    <button onclick="makeSmall()">Small</button>
    <button onclick="makeNormal()">Normal</button>
  </div> 
  
  <script> 
  var myVideo = document.getElementById("video1");

  
  function playPause() { 
    if (myVideo.paused) 
      myVideo.play(); 
    else 
      myVideo.pause(); 
  } 
  
  function makeBig() { 
      myVideo.width = 900; 
  } 
  
  function makeSmall() { 
      myVideo.width = 320; 
  } 
  
  function makeNormal() { 
      myVideo.width = 420; 
  } 
  

на данный момент я создал кнопку, но она ничего не делает (ofc, поскольку у меня нет никакого кода, прикрепленного к ней

tbh Я понятия не имею, как это сделать, поэтому я спрашиваю, знает ли кто-нибудь, как это сделать здесь 🙂

Ответ №1:

У элемента Video есть атрибут цикла.

Если вы хотите использовать кнопку для переключения этого атрибута, вы могли бы сделать

 function loop() {
    myVideo.toggleAttribute('loop');
}
  

Комментарии:

1. THAAANKKSSSSS <3

Ответ №2:

  function loop(){
    if(myVideo.loop == false){
      myVideo.loop = true
    }
  }