HTML5-2_input后<button onclick="playvideo()">不失效-CSDN博客

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119764693

1.html5新元素video

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html5新增video元素</title>
	</head>
	<body>
		<h3>video视频窗口</h3>
		<h3>controls控制器</h3>
		<h3>source 视频资源</h3>
		<h3>src资源路径</h3>
		<h3>type 播放资源的类型mp4，ogg，webm</h3>
		<video width="500px"height="400px"controls="controls">
			<source src="ziyuan/movie.mp4"type="video/mp4"></source>
		</video>
	</body>
</html>

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>video</title>
	</head>
	<body>
		视频<br>
		<video id="video" width="200px">
			<source src="ziyuan/video1.mp4"type="video/mp4"></source>
		</video><br>
		<input type="button" name=""  value="播放/暂停" onclick="playpause()"/>
		<input type="button" name=""  value="放大" onclick="makebig()"/>
		<input type="button" name=""  value="缩小" onclick="makesmall()"/>
		<input type="button" name=""  value="还原" onclick="makenormal()"/>
		<script type="text/javascript">
			var videoobj= document.getElementById("video")
			function playpause(){
				if (videoobj.paused) {
					videoobj.play()
				}else{
					videoobj.pause()
				}
			}
			function makebig(){
				videoobj.width="400"
			}
			function makesmall(){
				videoobj.width="70"
			}
			function makenormal(){
				videoobj.width="200"
			}
		</script>
	</body>
</html>

2.html5新元素audio

大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

如需在 HTML5 中播放音频，你需要使用以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>audio音频</title>
	</head>
	<body>
		音频<br>
		<audio controls="controls">
			<source src="ziyuan/zuimeideshunjian.mp3"type="audio/mp3"></source>
		</audio>
	</body>
</html>