首页  >  问答  >  正文

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:

 <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>
仅有的幸福仅有的幸福2671 天前1115

全部回复(3)我来回复

  • 伊谢尔伦

    伊谢尔伦2017-06-27 09:21:42

    要找到当前点击块的video标签进行操作

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

    回复
    0
  • 欧阳克

    欧阳克2017-06-27 09:21:42

    问题在于这一句:

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

    获取video标签,根据标签名video返回了伪数组对象,后面的[]内是对象的索引值,你写了[0]所以每次只能播放第一个视频了(数组索引从0开始)。
    要想点击哪个标签就播放哪个,可以使用for循环遍历该伪数组,配合下标确定相应的标签播放即可

    回复
    0
  • 迷茫

    迷茫2017-06-27 09:21:42

    通过事件委托事件获取当前点击元素,$(document).on('click','xx',fn(){});

    回复
    0
  • 取消回复