解决基于html5<video>标签多个视频同时播放的问题

在同一个页面嵌入多个video时，会出现多个video同时播放的问题。以下代码实现了播放下一个视频时，则暂停上一个视频。

html代码如下：

<video width="500" height="300" controls="controls" poster="../images/test.png" id="0">
<source src="../video/test.ogg" type="video/ogg">
<source src="../video/test.mp4" type="video/mp4">
</video>
<video  width="500" height="300"  controls="controls" poster="../images/test.png" id="1">
<source src="../video/test.ogg" type="video/ogg">
<source src="../video/test.mp4" type="video/mp4">
</video>
<video  width="500" height="300"  controls="controls" poster="../images/test.png" id="2">
<source src="../video/test.ogg" type="video/ogg">
<source src="../video/test.mp4" type="video/mp4">
</video>

js代码如下：

$(function() {

        
           var video = document.getElementsByTagName("video");
for ( var i in video) {
var e = video[i];
(function(i) {
$(e).bind('play', function() {
for ( var j in video) {
if (j != i) {
document.getElementById(j).pause();
}
}
});
})(i);
}

});