videoApi和audioApi的基本使用方法

html才是最好的语言

已于 2023-06-08 14:31:02 修改

阅读量197

点赞数

文章标签： javascript 开发语言

于 2023-06-06 18:22:46 首次发布

本文链接：https://blog.csdn.net/qq_21382777/article/details/131073531

版权

以下分别是videoApi和audioApi的一个完整案例代码实现：

videoApi

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>Video API Example</title>
</head>
<body>
	<h1>Video API Example</h1>
	<video id="myVideo" width="320" height="240" controls>
		<source src="myVideo.mp4" type="video/mp4">
		<source src="myVideo.ogg" type="video/ogg">
		Your browser does not support the video tag.
	</video>

	<p>
		<button onclick="play()">Play</button>
		<button onclick="pause()">Pause</button>
		<button onclick="mute()">Mute</button>
		<button onclick="unMute()">Unmute</button>
	</p>

	<script>
		var myVideo = document.getElementById("myVideo"); 

		function play() { 
			myVideo.play(); 
		} 

		function pause() { 
			myVideo.pause(); 
		} 

		function mute() { 
			myVideo.muted = true; 
		} 

		function unMute() { 
			myVideo.muted = false; 
		} 
	</script>
</body>
</html>

以上代码演示了一个带有控制按钮的视频播放器，并使用 videoApi 提供的方法 `play()`、`pause()`、`muted` 实现了播放、暂停和静音以及取消静音的功能。

audioApi

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>Audio API Example</title>
</head>
<body>
	<h1>Audio API Example</h1>
	<audio id="myAudio" controls>
		<source src="myAudio.mp3" type="audio/mpeg">
		<source src="myAudio.ogg" type="audio/ogg">
		Your browser does not support the audio element.
	</audio>

	<p>
		<button onclick="play()">Play</button>
		<button onclick="pause()">Pause</button>
		<button onclick="mute()">Mute</button>
		<button onclick="unMute()">Unmute</button>
	</p>

	<script>
		var myAudio = document.getElementById("myAudio"); 

		function play() { 
			myAudio.play(); 
		} 

		function pause() { 
			myAudio.pause(); 
		} 

		function mute() { 
			myAudio.muted = true; 
		} 

		function unMute() { 
			myAudio.muted = false; 
		}
	</script>
</body>
</html>