我目前可以通过点击<video>
标记中的任意位置播放和暂停视频。但不幸的是,当我添加了第二个视频时,该功能仅适用于第一个视频。
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
js代码有任何问题。请建议。
答案 0 :(得分:0)
它不起作用湖,因为,解释器将只考虑具有相同元素的最后一个ID,如果您只使用两个视频,那么您可以添加其他视频ID和暂停ID
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
答案 1 :(得分:0)
尝试使用ids的类instud 如需更多详细信息,请访问此页面 http://flash.flowplayer.org/demos/installation/multiple-players.html