滚动字幕、背景音乐与多媒体

来自CloudWiki
跳转至： 导航， 搜索

滚动字幕

  • 源代码:
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

音乐

多媒体

Web上的视频

在HTML5出现之前Web视频并没有一个标准，有些网站使用Flash插入视频，但是要求用户有Flash播放器；也有些网站使用Java播放器，但是要在JVM虚拟机中解码视频和音频需要用户拥有一台配置较高的机器。

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

语法格式

在html5中，Web开发者可以用一种标准的方式指定视频的外观。

语法格式如下： 

<video src="视频文件" controls="controls"> </video>

使用<video>标签来定义视频播放器，不仅仅设置了要播放的视频文件，还包括视频的控制栏，例如播放、暂停、进度和音量控制、全屏等功能，更重要的是还可以自定义这些功能和控制栏的样式。

Web20122702.png

试一试：视频的播放 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<video src="video/movie.ogv" controls="controls">
			your browser does not support the video tag
		</video>
	</body>
</html>

视频格式

video元素目前仅支持三种格式的视频文件。

在HTML5中支持的视频格式主要包括Ogg、MPEG 4、WebM等。

Ogg

Ogg：指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器，可以纳入各式各样自由和开放源代码的编解码器，包含音效、视频、文字与元数据的处理。其中，Theora是开源的免费的视频压缩编码技术，质量可以与主流的数字视频压缩编解码标准H.264相媲美；Vorbis是 Ogg的音频编码，类似于MP3等的音乐格式，但是它是完全免费、开放和没有专利限制的。

注：ogv是html5中的一个名为Ogg Theora的视频格式，起源于ogg容器格式。

MPEG 4

MPEG 4：指带有H.264视频编码和AAC音频编码的mpeg文件。同等条件下，mpeg4格式的视频质量较好，它的专利被MPEG-LA公司控制，任何支持播放mpeg4视频的设备，都必须拥有MPEG-LA颁发的许可证。mpeg4有3种编码，mpg4（xdiv），mpg4（xvid），avc（h264），h.264是公认的mp4标准编码，如果在网页开发中有浏览器不能识别的mpeg文件可以尝试用视频格式转换器转换一下格式。AAC是一种由MPEG-4标准定义的有损音频压缩格式，提供了目前最高的编码效率。

WebM

WebM：指带有VP8视频编码和Vorbis音频编码的WebM文件。WebM由Google提出，是一个开放、免费的媒体文件格式，其中Google将其拥有的VP8视频编码技术开源，Ogg Vorbis本来就是开放格式。WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。

基本属性

src 和controls属性

src和controls是<video>标签的基本属性，src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，并且<video></video>标签之间还可以插入文字，用于浏览器不能支持视频的时候显示。例如： 

<video src="vedio1.mp4" controls>
浏览器不支持该视频，请下载最新版本的浏览器
</video>

注意：苹果操作系统的Safari浏览器只支持 MP4类型，而ogg格式的视频则是适用于Firefox、Opera以及Chrome 浏览器。IE 8不支持video元素，IE 9开始提供了对使用 MPEG4的video元素的支持。

source元素

如果我们不确定自己的浏览器支持什么格式的视频，可以使用source元素给浏览器提供多种格式的视频文件选择。

video元素允许嵌套多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。例如： 

<video width="500" height="250" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持此种视频格式。
</video>

Web20122702.png

试一试：视频的兼容性

例： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<video width="320" height="240" controls autoplay>
		  <source src="video/movie.ogv" type="video/ogg">
		  <source src="video/movie.mp4" type="video/mp4">
		  <source src="video/movie.webm" type="video/webm">
		  <object data="video/movie.mp4" width="320" height="240">
			<embed width="320" height="240" src="video/movie.swf">
		  </object>
		   your browser does not support the video tag
		</video>
	</body>
</html>

其他常用属性：

  • width 像素或百分比 设置视频播放窗口的宽度
  • height 像素或百分比 设置视频播放窗口的高度
  • autoplay autoplay 当页面载入完成后自动播放视频。
  • loop loop 视频结束时重新开始播放。
  • preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。

width、height属性

width、height属性用于设置视频播放窗口的宽高。在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。

视频播放时有时上下还有黑边框，用户体验很不好。为了让视频在web端自适应，可以设置video标签属性宽度为100%，高度为auto,如下： 

video {
    /*width:100%*/
    max-width: 100%;
    height: auto;
}

如果width属性设置为 100%，视频播放器会根据屏幕大小自动调整比例，且可以比原始尺寸大；max-width 属性设置为 100%，视频播放器会根据屏幕自动调整比例，但不会超过其原始大小。

Web20122703.png

代码： 

<!DOCTYPE html>
<style type="text/css">
	video {
    width:80%;
    max-width: 100%;
    height: auto;
}
</style>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<video  controls autoplay>
		  <source src="video/movie.ogv" type="video/ogg">
		  <source src="video/movie.mp4" type="video/mp4">
		  <source src="video/movie.webm" type="video/webm">
		  <object data="video/movie.mp4" width="320" height="240">
			<embed width="320" height="240" src="video/movie.swf">
		  </object>
		   your browser does not support the video tag
		</video>
	</body>
</html>

autoplay属性：自动播放

autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉表示不自动播放。 

<video width="500" height="350" src="vedio1.mp4" autoplay="autoplay" ></video>

注意，表示自动播放时该属性要么没有值，要么其值恒等于属性名；而在标签中不使用该属性表示不自动播放。

loop属性：循环播放

loop属性用于指定视频是否循环播放，同样也是一个布尔属性。 

<video width="500" height="350" src="vedio1.mp4" autoplay loop></video>

代码： 

<!DOCTYPE html>
<style type="text/css">
	video {
    width:80%;
    max-width: 100%;
    height: auto;
}
</style>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<video  controls autoplay loop>
		  <source src="video/movie.ogv" type="video/ogg">
		  <source src="video/movie.mp4" type="video/mp4">
		  <source src="video/movie.webm" type="video/webm">
		  <object data="video/movie.mp4" width="320" height="240">
			<embed width="320" height="240" src="video/movie.swf">
		  </object>
		   your browser does not support the video tag
		</video>
	</body>
</html>

preload属性：预加载

preload属性用于定义视频是否预加载。有三个属性值可选择：none、metadata、auto。如果不使用此属性，默认为auto。 

<video src="vedio1.mp4"  preload="none"></video>
  • none：不进行预加载。选择此属性值多数情况是开发者认为用户不期望此视频，或者为了减少HTTP请求。
  • metadata：部分预加载。选用此属性值预先为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
  • auto：全部预加载。为用户预先加载了该视频。

试一试：给刚才的video标签添加preload属性，看看

web上的音频

HTML5出现之前在网页中播放音频也没有固定的标准，大多数音频是通过插件（如Flash）来播放的，但是并非所有浏览器都有同样的插件，尤其是主流浏览器已经纷纷宣布停止支持Flash插件，网站正在转向开放的web技术。

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

支持的音频格式

audio元素一共支持三种音频格式：ogg,mp3 和wav.

  • Ogg Vorbis：Ogg Vorbis是一种音频压缩格式，类似于MP3等音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg"，这种文件的设计格式非常先进，可以在未来的任何播放器上播放，因此，这种文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。
  • MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。
  • wav：是录音时用的标准的Windows文件格式，文件的扩展名为“wav”，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。

语法格式

audio元素语法格式： 

<audio src="音频文件路径" controls>
您的浏览器不支持audio标签
</audio>

src 属性描述了音频文件的地址 (URL)，controls属性规定浏览器为音频提供播放控件。 

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>OpenBrains.net</title> 
</head>
<body>

<audio  src="audio/horse.ogg"  controls>
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>

其他常用属性

  • autoplay autopl在此插入非格式文本ay 当页面载入完成后自动播放音频。
  • loop loop 音频结束时重新开始播放。
  • preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>OpenBrains.net</title> 
</head>
<body>

<audio  src="audio/horse.ogg"  controls loop preload>
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>

音频中的source元素

目前所有的主流PC、移动端浏览器的最新版已经全部支持了mp3格式，Ogg文件格式的音频可以在 Firefox、Opera和Chrome浏览器下播放，如果要在Internet Explorer和Safari浏览器播放音频，则必须使用 MP3 文件。

为了解决不同浏览器对音频文件的兼容性，在HTML5中，仍然可以运用source元素可以为audio元素提供多个备用文件。 

<audio controls="controls">
	<source src="音频文件地址" type="媒体文件类型/格式">
	<source src="音频文件地址" type="媒体文件类型/格式">
	……
</audio>


代码： 

  <!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>OpenBrains.net</title> 
</head>
<body>

<audio controls>
  <source src="audio/horse.ogg" type="audio/ogg">
  <source src="audio/horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>

实训任务

完成网上商城首页中的视频广告部分，使用默认的视频控制栏。

Web20122701.png

取自“http://www.openbrains.net/mediawiki/index.php?title=滚动字幕、背景音乐与多媒体&oldid=24541”