Question

此代码在只有1个视频的页面上效果很好。我正在尝试使其适应包含视频阵列的页面（每页8个），我需要做的就是捕获当播放器单击播放按钮时存储在$ item.vid中的视频ID。

我尝试添加具有视频ID值的div，并且外观上在页面上创建的所有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>

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

Answer 1

解决这个问题的技巧是思考“保持简单”，一旦我想到了，答案就来了。

解决方案是对数组中的每个视频标签进行个性化设置，我通过在视频标签中添加onclick选项来做到这一点（直到现在我才意识到这是可能的）。然后在该onclick内部调用一个函数，并通过onclick事件将视频ID传递给该函数。

这样的事情（我正在与smarty一起工作，因此var放在{}括号内）

<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>

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

捕获用户从视频数组播放的视频ID

1 个答案: