javascript - Halaman mempunyai berbilang video, video, bagaimana untuk mengikat acara? Klik yang mana satu untuk dimainkan Hanya yang pertama akan dimainkan.

Question

Seperti tajuknya, terdapat beberapa video di halaman saya Struktur dan nama video adalah sama ? Bagaimana untuk membetulkannya?
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>

Answer 1

Untuk mencari teg video bagi blok yang sedang diklik untuk beroperasi

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

Answer 2

Masalahnya terletak pada ayat ini:

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

Dapatkan teg video dan kembalikan objek tatasusunan pseudo berdasarkan video nama tag [] berikut ialah nilai indeks objek yang Anda tulis [0] jadi hanya video pertama yang boleh dimainkan setiap kali (indeks tatasusunan bermula dari 0).
Jika anda ingin memainkan teg yang anda klik, anda boleh menggunakan gelung for untuk melintasi tatasusunan pseudo dan gunakan subskrip untuk menentukan teg yang sepadan untuk dimainkan

Answer 3

Dapatkan elemen semasa yang diklik melalui acara perwakilan acara, $(document).on('click','xx',fn(){});