jquery重复video播放器

在开发一个视频相关的网站或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来实现不同的播放器功能。

jquery重复video播放器