HTML5-video and audio

最新推荐文章于 2024-05-23 15:59:29 发布

张家豪Cd

最新推荐文章于 2024-05-23 15:59:29 发布

阅读量315

点赞数 1

分类专栏： HTML5 文章标签： html5 video

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在HTML5中显示视频

<video src="地址" controls="contrlos'> </video>

controls 属性供添加播放、暂停和音量控件。
可添加宽度（width）和高度（height）
video之间插入的内容， video 元素的浏览器不会显示

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

//案列
<!DOCTYPE html>
<html>
<body>
   
	<div style="text-align:center;">
	 //添加四个按钮button
		<button onclick="playPause()">播放/暂停</button>
		<button onclick="makeBig()">大</button>
		<button onclick="makeNormal()">中</button>
		<button onclick="makeSmall()">小</button>
		<br /> //换行
		//html5<video>元素 
		<video id="video1" width="420" style="margin-top:15px;">
		  //HTML <source> 元素为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源。这    是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。
			<source src="video/88fa6cc5244c5618e8bff95dabaece36.mp4" type="video/mp4" />
          </video>
	</div>

	<script type="text/javascript">
	//getElementByldc查询文档特定元素
		var myVideo = document.getElementById("video1");

		function playPause() {
			if (myVideo.paused)
				myVideo.play();
			else
				myVideo.pause();
		}

		function makeBig() {
			myVideo.width = 1200;
		}

		function makeSmall() {
			myVideo.width = 520;
		}

		function makeNormal() {
			myVideo.width = 420;
		}
	</script>

</body>
</html>

width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。
loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
muted
这个属性会导致媒体播放时，默认关闭声音。
poster
这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件，有3个值可选：

“none” ：不缓冲
“auto” ：页面加载后缓存媒体文件
“metadata” ：仅缓冲文件的元数据
WebVTT
是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：
ubtitle
通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
captions
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
timed descriptions
将文字转换为音频，用于服务那些有视觉障碍的人。
一个典型的 WebVTT 文件如下：
`WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

…
音频audio

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 “autoplay”，则忽略该属性。

src src 要播放的音频的 URL。

代码案列
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   <audio controls="controls" autoplay="autoplay">
	   <source src="audio/Michael Jackson-You Are Not Alone.mp3" />
   </audio>
</body>
</html>

张家豪Cd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-video and audio

在HTML5中显示视频&lt;video src="地址" controls="contrlos'&gt; &lt;/video&gt;controls 属性供添加播放、暂停和音量控件。可添加宽度（width）和高度（height）video之间插入的内容， video 元素的浏览器不会显示属性值描述 autoplayautoplay如果出现该属性，则视频在就绪后马...
复制链接

扫一扫