如題,我的頁面中有好幾個視頻,視頻的結構,名稱都一樣,想要實現的是 給他們統一綁定事件 單擊那個 那個開始播放?請問怎麼整?
js:
//视频暂停播放
$(".news_main .video_box .PLAY").click(function(){
var myVideo = document.getElementsByTagName('video')[0];
if(myVideo.paused){
$(this).parents(".video_bg").hide();
myVideo.play();
}else{
myVideo.pause();
$(this).parents(".video_bg").show();
}
});
HTML:
<p class="news_main">
<!-- 视频块1-->
<p class="news_block">
<p class="video_box">
<video class="video" src="跑道全.mp4"></video>
<p class="video_bg">
<img class="PLAY" src="images/PLAY.png" alt=""/>
</p>
</p>
<p class="video_msg">
环氧地坪漆的优点?<span>50浏览</span>
</p>
</p>
<!-- 视频块1-->
<p class="news_block">
<p class="video_box">
<video class="video" src="跑道全.mp4"></video>
<p class="video_bg">
<img class="PLAY" src="images/PLAY.png" alt=""/>
</p>
</p>
<p class="video_msg">
环氧地坪漆的优点?<span>50浏览</span>
</p>
</p>
<!-- 视频块1-->
<p class="news_block">
<p class="video_box">
<video class="video" src="跑道全.mp4"></video>
<p class="video_bg">
<img class="PLAY" src="images/PLAY.png" alt=""/>
</p>
</p>
<p class="video_msg">
环氧地坪漆的优点?<span>50浏览</span>
</p>
</p>
</p>
要找到當前點擊區塊的video標籤進行操作
問題在於這句話:
取得video標籤,根據標籤名video返回了偽數組對象,後面的[]內是對象的索引值,你寫了[0]所以每次只能播放第一個視頻了(數組索引從0開始) 。
要點選哪個標籤就播放哪一個,可以使用for迴圈來遍歷該偽數組,配合下標決定對應的標籤播放即可
透過事件委託事件取得目前點擊元素,$(document).on('click','xx',fn(){});