Javascript 捕获用户从视频阵列播放的视频id

这段代码在只有一个视频的页面上非常有效。我正在尝试对其进行调整，使其适用于包含一系列视频（每页8个）的页面。当播放器单击“播放”按钮时，我需要捕获存储在$item.vid中的视频id

我尝试添加一个具有视频id值的div，页面上所有由look创建的div实际上都有不同的值，这很好，但是它们都有相同的div id。因此这对我没有帮助

<div id="output"></div>

 //foreach starts here

<video id="myVideo" width="320" height="176" controls autoplay>
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>

  //foreach ends here



<script>
    var media = document.getElementById('myVideo');

    // Playing event
    media.addEventListener("playing", function() {
        $("#output").html("Playing event triggered");
    });

    // Pause event
    media.addEventListener("pause", function() { 
        $("#output").html("Pause event triggered"); 
    });

    // Seeking event
    media.addEventListener("seeking", function() { 
        $("#output").html("Seeking event triggered"); 
    });

    // Volume changed event
    media.addEventListener("volumechange", function(e) { 
        $("#output").html("Volumechange event triggered"); 
    });

</script>   

//foreach从这里开始
//前路到此为止
var media=document.getElementById（'myVideo'）；
//比赛项目
media.addEventListener（“播放”，函数（）{
$（“#输出”）.html（“播放事件触发”）；
});
//暂停事件
addEventListener（“暂停”，函数（）{
$（“#输出”）.html（“暂停事件触发”）；
});
//寻找事件
addEventListener（“查找”，函数（）{
$（“#输出”）.html（“搜索事件触发”）；
});
//卷更改事件
media.addEventListener（“卷更改”，函数（e）{
$（“#输出”）.html（“已触发Volumechange事件”）；
});

---

预期的结果应该是，当用户单击play js时，可以从多个视频页面中获取该视频记录id。

其中的诀窍是思考“保持简单”，一旦我想到了这一点，答案就来了

解决方案是对阵列中的每个视频标记进行个性化，我通过在视频标记中添加onclick选项来实现这一点（直到现在我还不知道这是可能的）。然后在onclick内部调用一个函数，并通过onclick事件将视频id传递给它

类似这样的东西（我正在与smarty合作，因此变量位于{}括号内）

< P类=“VJS No.JS”>查看此视频请启用JavaScript，并考虑升级到
的Web浏览器

---

然后getVidId函数获取通过onclick传递给它的视频id，然后您可以在该点上使用该id执行任何操作。：）

解决这个问题的诀窍是想“保持简单”，一旦我想到了这一点，答案就来了

解决方案是对阵列中的每个视频标记进行个性化，我通过在视频标记中添加onclick选项来实现这一点（直到现在我还不知道这是可能的）。然后在onclick内部调用一个函数，并通过onclick事件将视频id传递给它

类似这样的东西（我正在与smarty合作，因此变量位于{}括号内）

< P类=“VJS No.JS”>查看此视频请启用JavaScript，并考虑升级到
的Web浏览器

然后getVidId函数获取通过onclick传递给它的视频id，然后您可以在该点上使用该id执行任何操作。：）

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" height="{$item.height}"  width="{$item.width}" poster="{$item.vbigthumb}" data-setup="{}" onclick="getVidId({$item.vid});">
          <source src="{$item.urlvid}" type="{$item.vtype}">   
          <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>