頁(yè)面多個(gè)視頻實(shí)現(xiàn)單獨(dú)控制

發(fā)布時(shí)間：2018-05-13 22:25:16

發(fā)布者：chaobai

瀏覽量:

我們?cè)谔幚硪粋€(gè)頁(yè)面中存在多個(gè)視頻時(shí)，會(huì)遇到一些問(wèn)題，比如說(shuō)點(diǎn)擊一個(gè)視頻多個(gè)視頻同時(shí)播放或者暫停，我們預(yù)期達(dá)到的效果是能夠?qū)崿F(xiàn)單獨(dú)控制。所以我們?cè)谟肑Query處理時(shí)應(yīng)該相應(yīng)的處理方法。下面文匯軟件的小編整理了一些相關(guān)知識(shí)給大家分享一下。

一、HTML頁(yè)面:video的屬性、樣式相同

點(diǎn)水成冰瀏覽量999

... 二、JS中的控制方法需要使用evt來(lái)獲得事件對(duì)象，獲取需要取得onclick事件的事件對(duì)象信息。如下面示例，實(shí)現(xiàn)當(dāng)前點(diǎn)擊視頻的單獨(dú)控制。 $(".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("播放了"); });

返回列表