HTML5多媒体素材的运用

最新推荐文章于 2023-06-04 14:38:11 发布

manREDoo

最新推荐文章于 2023-06-04 14:38:11 发布

阅读量2.7k

点赞数 1

文章标签： HTML5 video audio iframe

本文链接：https://blog.csdn.net/manREDoo/article/details/73744246

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

嵌入图片：

<img>....</img>: src 图片的位置，alt说明文字，height图片高度，width图片宽度

<video>与<audio>都可以播放声音，不同点在于<video>可以用来显示图像，<audio>只能用来播放声音

<audio>...</audio>、<video>...</video>:

src声音的位置

controls是否显示播放面板

autoplay是否自动播放

perload是否预先加载、auto自动加载、metadata加载meta的信息、none不加载

Width\height 宽和长的设置，像素为单位

Type=”audio/mpeg”:指定播放类型，不需要让浏览器去检测文件

<source>:提供不类型的文件，适配不同的浏览器

Flash 动画

在网页播放的格式是.swf 文件，在网页中加入flash动画可利用<embed>标记，语法如下：

使用iframe嵌入优酷视频

src：网页的地址

Width/height :窗口的宽和高

Seamless:隐藏边框的滚动条

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>多媒体素材的运用</title>
</head>
<body>
	<h1>背包客旅行札记</h1>
	<p>旅行是一种休息，而休息是为了走更长的路</p>
	<img src="photo.jpg" alt="风景" width="420" >
	<audio autobuffer autoloop loop controls>
		<source src="好姐妹.mp3">
		<source src="好姐妹.wav">
		无法播放
	</audio>
	<video src="瀑布.mp4" autobuffer autoplay  controls poster="photo.jpg"></video>
	<h2>优酷视频</h2>
	<iframe src="http://v.youku.com/v_show/id_XMjg0OTQ1MDUwMA==.html?spm=a2hgm.20020864.m_206374.5~5~5~5~5~5!2~A&from=y1.3-game-new3-136-20864.205632-205633-206375-206374.1-1"
	width="800" height="700" 
	></iframe>
</body>
</html>