javascript - 一個頁面有多個視頻,vidoe,怎么綁定事件呢?點擊哪個哪個播放 我 的只播放第一個
問題描述
如題,我的頁面中有好幾個視頻,視頻的結(jié)構(gòu),名稱都一樣,想要實現(xiàn)的是 給他們統(tǒng)一綁定事件 單擊那個 那個開始播放?請問怎么整?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 src='http://www.lshqa.cn/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='http://www.lshqa.cn/wenda/images/PLAY.png' alt=''/></p> </p> <p class='video_msg'>環(huán)氧地坪漆的優(yōu)點?<span>50瀏覽</span> </p></p><!-- 視頻塊1--><p class='news_block'> <p class='video_box'><video src='http://www.lshqa.cn/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='http://www.lshqa.cn/wenda/images/PLAY.png' alt=''/></p></p> <p class='video_msg'>環(huán)氧地坪漆的優(yōu)點?<span>50瀏覽</span> </p></p><!-- 視頻塊1--><p class='news_block'> <p class='video_box'><video src='http://www.lshqa.cn/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='http://www.lshqa.cn/wenda/images/PLAY.png' alt=''/></p> </p> <p class='video_msg'>環(huán)氧地坪漆的優(yōu)點?<span>50瀏覽</span> </p></p> </p>
問題解答
回答1:要找到當(dāng)前點擊塊的video標(biāo)簽進行操作
var myVideo=$(this).parents('.news_block').find('.video')[0];回答2:
問題在于這一句:
var myVideo = document.getElementsByTagName(’video’)[0];
獲取video標(biāo)簽,根據(jù)標(biāo)簽名video返回了偽數(shù)組對象,后面的[]內(nèi)是對象的索引值,你寫了[0]所以每次只能播放第一個視頻了(數(shù)組索引從0開始)。要想點擊哪個標(biāo)簽就播放哪個,可以使用for循環(huán)遍歷該偽數(shù)組,配合下標(biāo)確定相應(yīng)的標(biāo)簽播放即可
回答3:通過事件委托事件獲取當(dāng)前點擊元素,$(document).on(’click’,’xx’,fn(){});
