javascript - Une page contient plusieurs vidéos, vidoe, comment lier des événements? Cliquez sur lequel jouer. Seul le premier sera joué.

Question

Comme le titre l'indique, il y a plusieurs vidéos sur ma page. Les structures et les noms des vidéos sont tous les mêmes. Ce que je veux réaliser, c'est leur lier les événements de manière unifiée. Sur lequel dois-je cliquer pour commencer à jouer. ? Comment le réparer?
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

Pour trouver la balise vidéo du bloc actuellement cliqué à exploiter

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

Answer 2

Le problème réside dans cette phrase :

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

Récupérez la balise vidéo et renvoyez un objet pseudo-tableau basé sur le nom de la balise vidéo. Le [] suivant est la valeur d'index de l'objet. Vous avez écrit [0] afin que seule la première vidéo puisse être lue à chaque fois (l'index du tableau). commence à 0) .
Si vous souhaitez lire la balise sur laquelle vous cliquez, vous pouvez utiliser une boucle for pour parcourir le pseudo-tableau et utiliser l'indice pour déterminer la balise correspondante à jouer

Answer 3

Obtenez l'élément actuellement cliqué via l'événement de délégation d'événement, $(document).on('click','xx',fn(){});