HTML5多媒体素材的应用

最新推荐文章于 2020-09-28 16:13:36 发布

cysear

最新推荐文章于 2020-09-28 16:13:36 发布

阅读量821

点赞数

分类专栏： HTML5 文章标签：多媒体 html5

本文链接：https://blog.csdn.net/cysear/article/details/46970809

版权

HTML5 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

HTML5多媒体素材的应用

1、网页图片使用须知

选择图片考虑：图片格式（JPEG，GIF）、图片分辨率（72dpi）、图片大小（<=30KB，大图割小图）

2、影音特效（<video>，<audio>）

音乐格式有WAV,MP3,OGG

表一浏览器对音乐格式的支持
浏览器	MP3	WAV	OGG
Internet explorer 9	Y
Google Chrome6	Y	Y	Y
Apple Safari 5	Y	Y
Firefox4.0		Y	Y
Opera 10.6		Y	Y

如果要让大部分浏览器都支持，最好准备MP3、OGG两种格式，WAV文件大，不建议用于网页。

添加音乐——<audio>声音

<audio src="music.mp3" type="audio/mpeg" controls></audio>

autoplay：是否自动播放音乐，设背景音乐

controls：是否显示播放面板 //如果不加 “controls” 在浏览器上不会显示播放器

loop：是否循环播放

preload：是否预先加载（auto:网页打开就加载影音；metadata:只加载meta信息；none:网页打开时不加载影音）

width/height：播放面板宽高

<audio controls="controls">
	<source src="multimedia/music.ogg" type="audio/ogg" />
	<source src="multimedia/music.mp3" type="audio/mpeg" />
	你的浏览器不支持播放模式
</audio>

以上代码表示，当浏览器不支持第一个source指定的OGG格式或者找不到音频文件时，就会播放第二个source指定的MP3音乐。当浏览器不支持<audio>标记时，会将写在<audio></audio>标记中的文字显示在屏幕上。

添加影音动画——<video>声音and图像

<video src="multimedia/butterfly.mp4" controls="controls"></video>

<video>标记支持3种影音格式：OGG（Theora编码）、MP4和WEBM（VP8编码）。

表二各浏览器对<video>标记的支持
浏览器	MP4	OGG	WEBM
Internet explorer 9	Y
Google Chrome6	Y	Y	Y
Apple Safari 5	Y
Firefox4.0			Y
Opera 10.6		Y	Y

如果要让所有浏览器都能浏览影片，至少要准备MP4+OGG或MP4+WebM才能支持大多数浏览器。

<video controls="controls">
	<source src="multimedia/butterfly.mp4" type="video/mp4" />
	<source src="multimedia/butterfly.ogg" type="video/ogg" />
	你的浏览器不支持此影音播放模式
</video>

添加Flash动画

Flash动画是矢量格式，文件小且并不失真，不仅可以加入音效，还可以制作交互效果，因此相当受欢迎。Flash动画应用的范围相当广泛，包括首页、动画短片、超链接按钮、表单，甚至还能做出各种各样的游戏以及动画。

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

<embed src="movie.swf" width="100" height="100">

使用传统影音播放器（解决浏览器不支持5的问题）

HTML5加入影音的语法相当简洁方便，但是当前有些常用的浏览器（如IE8）仍然不支持HTML5，因此最好能够提供传统的object与embed语法，让不支持<video>标记的浏览器能够使用Flash Player进行播放。

语法如下：

<video controls="controls">
	<source src="multimedia/butterfly.mp4" />
	<source src="multimedia/butterfly.ogg" />
	<strong><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
		<param name="movie" value="butterfly.swf" />
		<param name="allowFullScreen" value="true" />
		<paramname="allowscriptaccess" value="always" />
		<embed movie="butterfly.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
	<object></strong>
</video>

使用iframe嵌入优酷视频

seamless：隐藏边框及滚动条，让网页看不出来嵌入了iframe框架

注：Opera、Chrome 以及 Safari 支持 seamless 属性。

Opera 12 以及更早的版本不支持seamless 属性，Safari 5 以及更早的版本也不支持该属性。

IE、Firefox不支持。

<a href="a.html" target="yy">上传文件</a>	<!--	target：链接到名称为yy的框架-->
<a href="b.html" target="yy">下载文件</a>
<iframe name="yy" src="a.html" width="300px" height="200px" >		<!--默认的链接文档名-->
你的浏览器不支持iframe框架
</iframe>

其实只需将src改成视频网址就可以，如果想让优酷影音自动播放，在网址后加?autoplay=1