javascript - 一個頁面有多個視頻,vidoe,怎麼綁定事件呢?點選哪個哪個播放 我 的只播放第一個
仅有的幸福
仅有的幸福 2017-06-27 09:19:42
0
3
1185

如題,我的頁面中有好幾個視頻,視頻的結構,名稱都一樣,想要實現的是 給他們統一綁定事件 單擊那個 那個開始播放?請問怎麼整?
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>
仅有的幸福
仅有的幸福

全部回覆(3)
伊谢尔伦

要找到當前點擊區塊的video標籤進行操作

 var myVideo=$(this).parents(".news_block").find(".video")[0];
学霸

問題在於這句話:

var myVideo = document.getElementsByTagName('video')[0];

取得video標籤,根據標籤名video返回了偽數組對象,後面的[]內是對象的索引值,你寫了[0]所以每次只能播放第一個視頻了(數組索引從0開始) 。
要點選哪個標籤就播放哪一個,可以使用for迴圈來遍歷該偽數組,配合下標決定對應的標籤播放即可

迷茫

透過事件委託事件取得目前點擊元素,$(document).on('click','xx',fn(){});

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板