For循环+增量

Question

我基本上是想让我的按钮适用于每个视频，这些视频是由循环本身生成的，还通过循环从我的服务器中获取文件。

我唯一的问题是按钮，视频可以正常播放。

我似乎无法将我的头缠在下面的一行上，也许除了我没有正确执行的这一行以外，甚至还有更多。

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>

What it should look like

Answer 1

您不要将要播放的功能放在for循环中。它必须在循环之外。另外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);
}

然后在循环结束后使其全部正常工作。

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

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