2018/05

页面多个视频实现单独控制

发布时间：2018-05-13 22:25:16

发布者：chaobai

浏览量:

我们在处理一个页面中存在多个视频时，会遇到一些问题，比如说点击一个视频多个视频同时播放或者暂停，我们预期达到的效果是能够实现单独控制。所以我们在用JQuery处理时应该相应的处理方法。下面文汇软件的小编整理了一些相关知识给大家分享一下。

一、HTML页面:video的属性、样式相同

点水成冰浏览量999

... 二、JS中的控制方法需要使用evt来获得事件对象，获取需要取得onclick事件的事件对象信息。如下面示例，实现当前点击视频的单独控制。 $(".video").click(function(evt) { var myVideo = $(evt.currentTarget).closest(".v-c-r-c-box").find('.video')[0]; var myPlayingImg = $(evt.currentTarget).closest(".v-c-r-c-b-img").find('.playing-img'); myVideo.pause(); myVideo.onpause = function() { myPlayingImg.show(); myVideo.controls=false; }; myVideo.onplay = function() { myPlayingImg.hide(); myVideo.controls=true; }; setControl(); console.log("暂停了"); }); $(".playing-img").click(function(evt) { var myVideo = $(evt.currentTarget).closest(".v-c-r-c-box").find('.video')[0]; var myPlayingImg = $(evt.currentTarget).closest(".v-c-r-c-b-img").find('.playing-img'); myPlayingImg.hide(); myVideo.play(); myVideo.controls=true; setControl(); console.log("播放了"); });