javascript - 一个页面有多个视频，vidoe,怎么绑定事件呢？点击哪个哪个播放 我 的只播放第一个

问题描述

问 题

如题，我的页面中有好几个视频，视频的结构，名称都一样，想要实现的是 给他们统一绑定事件 单击那个 那个开始播放？请问怎么整？
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:

 <div class="news_main">
        <!-- 视频块1-->
        <div class="news_block">
            <div class="video_box">
                <video class="video"  src="跑道全.mp4"></video>
                <div class="video_bg">
                    <img class="PLAY"  src="images/PLAY.png" alt=""/>
                </div>
            </div>
            <div class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </div>
        </div>
        <!-- 视频块1-->
        <div class="news_block">
            <div class="video_box">
                <video class="video" src="跑道全.mp4"></video>
                <div  class="video_bg">
                    <img class="PLAY"  src="images/PLAY.png" alt=""/>
                </div>
        </div>
            <div class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </div>
        </div>
        <!-- 视频块1-->
        <div class="news_block">
            <div class="video_box">
                <video class="video" src="跑道全.mp4"></video>
                <div class="video_bg">
                    <img class="PLAY" src="images/PLAY.png" alt=""/>
                </div>
            </div>
            <div class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </div>
        </div>
    </div>

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

$(".news_main .video_box .PLAY").click(function(evt){
       var myVideo = $(evt.currentTarget).closest('.video_box').find('video')[0];
        if(myVideo.paused){
            $(this).parents(".video_bg").hide();
            myVideo.play();
        }else{
            myVideo.pause();
            $(this).parents(".video_bg").show();
        }
    });

这篇关于javascript - 一个页面有多个视频，vidoe,怎么绑定事件呢？点击哪个哪个播放 我 的只播放第一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！