Для приращения l oop +

Question

Я в основном пытаюсь заставить свои кнопки работать для каждого видео, видео генерируются самим l oop, извлекая файлы с моего сервера также с помощью l oop.

Моя единственная проблема - кнопки, видео генерируется нормально.

Кажется, я не могу обернуть голову вокруг следующей строки, может быть, даже больше, чем просто эта строка, я не делаю правильно.

var vid[i] = document.getElementById( + [i] + "myVideo");

Я вообще правильно это делаю?

<script>
var files = <?php $out = array();
foreach (glob('../medias/aPartager/visuel/*.mp4') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['filename'];
}
echo json_encode($out); 

?>;
var files, text, fLen, i;
fLen = files.length;
text = "";
for (i = 0; i < fLen; i++) {
text += "<a href='#video'><button onclick='playVid(" + i + ")' type='button'>Play Video</button><button onclick='pauseVid(" + i + ")' type='button'>Pause Video</button><button onclick='enableControls(" + i + ")' type='button'>Enable controls</button><button onclick='disableControls(" + i + ")' type='button'>Disable controls</button><br><video id='" + i + "myVideo' class='video' width='320' height='240' controls><source src='../medias/aPartager/visuel/" + files[i] + "' type='video/mp4'>Votre navigateur ne prend pas en charge la balise vidéo.</video></a>";




  var vid[i] = document.getElementById( + [i] + "myVideo");

  function playVid(i) { 
    vid[i].play(i); 
  } 

  function pauseVid(i) { 
    vid[i].pause(i); 
  } 

  function enableControls(i) { 
    vid[i].controls = true;
    vid[i].load(i);
  } 

  function disableControls(i) { 
    vid[i].controls = false;
    vid[i].load(i);
  } 



}
text += "";

document.getElementById("lesVideos").innerHTML = text;
<script>

Как это должно выглядеть

Answer 1

Вы не помещаете функции для воспроизведения внутрь для l oop. Это должно быть за пределами l oop. Также var vid[1] НЕ действует

function playVid(id) { 
  let element = document.getElementById(id);
  element.play(); 
} 

function pauseVid(id) { 
  let element = document.getElementById(id);
  element.pause(); 
} 

<div class="video">
  <button onclick="playVid('video-1')" type="button">Play Video</button>
  <button onclick="pauseVid('video-1')" type="button">Pause Video</button><br> 

  <video id="video-1" width="320" height="176">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>
<div class="video">
  <button onclick="playVid('video-2')" type="button">Play Video</button>
  <button onclick="pauseVid('video-2')" type="button">Pause Video</button><br> 
  <video id="video-2" width="320" height="176">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

ИЛИ другой параметр

let videoMap = {}
for (i = 0; i < fLen; i++) {
 // Generate HTML first
 // Add the video to videoMap and cache it
  videoMap[i] = document.getElementById(i);
}

, затем ПОСЛЕ окончания l oop, чтобы все заработало.

function playVid(id) { 
  videoList[id].play(); 
} 

function pauseVid(id) { 
  videoList[id].pause(); 
}