頁面多個視頻實現(xiàn)單獨控制

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

發(fā)布者：chaobai

瀏覽量:

我們在處理一個頁面中存在多個視頻時，會遇到一些問題，比如說點擊一個視頻多個視頻同時播放或者暫停，我們預(yù)期達(dá)到的效果是能夠?qū)崿F(xiàn)單獨控制。所以我們在用JQuery處理時應(yīng)該相應(yīng)的處理方法。下面文匯軟件的小編整理了一些相關(guān)知識給大家分享一下。

一、HTML頁面:video的屬性、樣式相同

點水成冰瀏覽量999

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

返回列表