HTML5 audio 和 video

最新推荐文章于 2024-08-23 09:56:36 发布

MrShyZhang

最新推荐文章于 2024-08-23 09:56:36 发布

阅读量422

点赞数

分类专栏： HTML5 文章标签： audio video 音频视频

本文链接：https://blog.csdn.net/thunderevil35/article/details/80656988

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

音频和视频共有属性

播放方法：

audio.play();

暂停方法:

audio.pause();

是否暂停属性:

audio.paused;

静音属性:

audio.muted;

音量属性:[ 0 -1 ]

audio.volume;

总时长属性: 单位s

audio.duration;

当前播放进度: 单位s

audio.currentTime;

2.2 视频的封面属性

video.poster = '图片的地址'

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音频</title>
</head>
<body>
	<audio id="audio" src="./video/1.mp3"  controls>
	</audio>
	<button id="play">播放</button>
	<button id="pause">暂停</button>
	<button id="muted">静音</button>
	<button id="voiceplus">音量+</button>
	<button id="voicemin">音量-</button>
	<button id="jump">快进</button>

	<script type="text/javascript">
		// 获取元素
		var audio = document.getElementById("audio");
		var play = document.getElementById("play");
		var pause = document.getElementById("pause");
		var muted = document.getElementById("muted");
		var voiceplus = document.getElementById("voiceplus");
		var voicemin = document.getElementById("voicemin");
		var jump = document.getElementById("jump");

		// 播放
		play.onclick = function() {
			audio.play();
		}
		// 暂停
		pause.onclick = function() {
			audio.pause();
		}
		// 静音
		muted.onclick = function() {
			audio.muted = !audio.muted;
		}
		// 音量+
		voiceplus.onclick = function() {
			var volume = ((audio.volume * 10 + 1) / 10).toFixed(1);
			if(volume >= 1) {
				volume = 1;
			}
			audio.volume = volume;
		}
		// 音量-
		voicemin.onclick = function() {
			var volume = ((audio.volume * 10 - 1) / 10).toFixed(1);
			if(volume <= 0) {
				volume = 0;
			}
			audio.volume = volume;
		}
		// 快进3秒
		// 所谓的快进是增加3秒
		jump.onclick = function() {
			// 获取当前播放进度(时间单位 s)
			// console.log();
			audio.currentTime += 3;
			// 获取整个视频的时长
			console.log(audio.duration);
		}

	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视频</title>
</head>
<body>
	<video id="video" src="./video/2.mp4"  controls>
	</video>
	<button id="play">播放</button>
	<button id="pause">暂停</button>
	<button id="muted">静音</button>
	<button id="voiceplus">音量+</button>
	<button id="voicemin">音量-</button>
	<button id="jump">快进</button>

	<script type="text/javascript">
		// 获取元素
		var video = document.getElementById("video");
		var play = document.getElementById("play");
		var pause = document.getElementById("pause");
		var muted = document.getElementById("muted");
		var voiceplus = document.getElementById("voiceplus");
		var voicemin = document.getElementById("voicemin");
		var jump = document.getElementById("jump");
		// 设置封面 
		// 如果视频没有封面属性 那么会默认使用该视频的第一帧当做封面
		video.poster = "./imgs/timg.jpg"
		// 播放
		play.onclick = function() {
			video.play();
		}
		// 暂停
		pause.onclick = function() {
			video.pause();
		}
		// 静音
		muted.onclick = function() {
			video.muted = !video.muted;
		}
		// 音量+
		voiceplus.onclick = function() {
			var volume = ((video.volume * 10 + 1) / 10).toFixed(1);
			if(volume >= 1) {
				volume = 1;
			}
			video.volume = volume;
		}
		// 音量-
		voicemin.onclick = function() {
			var volume = ((video.volume * 10 - 1) / 10).toFixed(1);
			if(volume <= 0) {
				volume = 0;
			}
			video.volume = volume;
		}
		// 快进3秒
		// 所谓的快进是增加3秒
		jump.onclick = function() {
			// 获取当前播放进度(时间单位 s)
			// console.log();
			video.currentTime += 3;
			// 获取整个视频的时长
			console.log(video.duration);
		}

	</script>
</body>
</html>