javascript - A page has multiple videos, vidoe, how to bind events? Click which one to play. Only the first one will be played.

Question

As the title says, there are several videos on my page. The structures and names of the videos are all the same. What I want to achieve is to bind events to them in a unified way. Which one should I click to start playing? How to fix it?
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

To find the video tag of the currently clicked block to operate

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

Answer 2

The problem lies in this sentence:

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

Get the video tag and return a pseudo-array object based on the tag name video. The following [] is the index value of the object. You wrote [0] so only the first video can be played each time (the array index starts from 0) .
If you want to play which tag you click on, you can use a for loop to traverse the pseudo array, and use the subscript to determine the corresponding tag to play

Answer 3

Get the current clicked element through the event delegation event, $(document).on('click','xx',fn(){});