时间戳

首页 > 解决方案 > For循环+增量

javascript - For循环+增量

问题描述

我基本上是想让我的按钮对每个视频都有效，视频是由循环本身生成的，也通过循环从我的服务器中获取文件。

我唯一的问题是按钮，视频生成得很好。

我似乎无法理解下一行，也许不仅仅是这行我做得不对。

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>

它应该是什么样子

标签： javascriptloopsfilevideo

解决方案

您不要将 for play 函数放在 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(); 
}

推荐阅读