我們在處理一個頁面中存在多個視頻時,會遇到一些問題,比如說點擊一個視頻多個視頻同時播放或者暫停,我們預(yù)期達(dá)到的效果是能夠?qū)崿F(xiàn)單獨控制。所以我們在用JQuery處理時應(yīng)該相應(yīng)的處理方法。下面文匯軟件的小編整理了一些相關(guān)知識給大家分享一下。
一、HTML頁面:video的屬性、樣式相同... 二、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("播放了"); });
點水成冰 瀏覽量999返回列表上一篇: div切換隱藏插件下一篇: 點擊彈出對應(yīng)彈窗
相關(guān)文章
相關(guān)案例
熱門文章
最新文章
- 找小程序開發(fā)公司?這6點需求說清楚,少走90%彎路2026-01-30
- 小程序開發(fā)10問 | 送給開發(fā)小白2026-01-30
- TypeScript在對象注解的應(yīng)用以及在接口中的使用方法2026-01-16
- 小程序開發(fā)出來之后,如何推廣?2026-01-16
- 小程序出現(xiàn)bug,該如何應(yīng)對?2025-12-18
- 小程序上架就躺平?90%都栽在后期維護(hù)上!2025-11-15
- 為什么APP必須持續(xù)維護(hù)?6個核心原因戳破真相2025-11-07
- 企業(yè)網(wǎng)站必備的8大基礎(chǔ)功能2025-11-01



