在開發一個視頻相關的網站或APP時,經常需要使用到video播放器。然而,有時會需要在一個頁面中重復使用相同的video播放器,如果每次都手動復制粘貼代碼,不僅費時費力,還容易出錯。這時,我們可以使用jQuery來實現重復使用相同的video播放器。
$(document).ready(function(){ //獲取video對象 var myVideo = document.getElementById("video"); //獲取控制按鈕對象 var ctrlBtn = $("#ctrlBtn"); //為控制按鈕添加點擊事件 ctrlBtn.click(function(){ //如果當前狀態為播放,則暫停;如果為暫停,則播放 if(myVideo.paused){ myVideo.play(); ctrlBtn.text("暫停"); }else{ myVideo.pause(); ctrlBtn.text("播放"); } }); });
上述代碼中,我們首先獲取了video對象和控制按鈕對象,并為控制按鈕添加了點擊事件。在點擊事件中,判斷當前video的播放狀態,如果為暫停則播放,如果為播放則暫停,并用jQuery動態修改控制按鈕顯示文本。
使用上述方法,我們可以在頁面中重復使用相同的video播放器,在不同的位置也可以通過修改id來實現不同的播放器功能。