自定义按钮实现video暂停和播放的方法

最新推荐文章于 2025-05-22 09:37:49 发布

翻译最新推荐文章于 2025-05-22 09:37:49 发布 · 2.1w 阅读

文章标签：

#video #播放 #暂停

jquery 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用HTML原生视频元素的play()和pause()方法实现视频的播放和暂停功能。通过JavaScript操作DOM元素，可以轻松地控制视频的播放状态，适用于网页中嵌入视频的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：两个方法只能用于原生获取的<video></video>元素，对jquery获取的元素不管用

1.play(); 实现播放

2.pause();实现暂停

// dom元素如下

<video width="800" height="400" id="video" controls="controls">
	<source src="./Gemini-V15.mp4" type="video/mp4"></source>		
</video>
	<button class="play">播放</button>
	<button class="close">暂停</button>

// js代码如下

<script>
	// video控件是原生获取的dom
	var video=document.getElementById("video");
		
	// 播放
	$(".play").click(function(){
	    video.play();
	})

	// 暂停		
	$(".close").click(function(){
		video.pause();
	})
		
		
</script>