“滚动字幕、背景音乐与多媒体”的版本间的差异
(→Web上的视频) |
|||
第10行: | 第10行: | ||
</marquee> | </marquee> | ||
</marquee></nowiki> | </marquee></nowiki> | ||
+ | |||
*参考文档;https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee | *参考文档;https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee | ||
+ | |||
==音乐== | ==音乐== | ||
第20行: | 第22行: | ||
HTML5规定了一种通过video元素来包含视频的标准方法。 | HTML5规定了一种通过video元素来包含视频的标准方法。 | ||
+ | |||
+ | ===语法格式=== | ||
+ | 在html5中,Web开发者可以用一种标准的方式指定视频的外观。 | ||
+ | |||
+ | 语法格式如下: | ||
+ | |||
+ | <nowiki><video src="视频文件" controls="controls"> </video></nowiki> | ||
+ | |||
+ | 使用<video>标签来定义视频播放器,不仅仅设置了要播放的视频文件,还包括视频的控制栏,例如播放、暂停、进度和音量控制、全屏等功能,更重要的是还可以自定义这些功能和控制栏的样式。 | ||
+ | |||
第29行: | 第41行: | ||
====Ogg==== | ====Ogg==== | ||
− | Ogg:指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器,可以纳入各式各样自由和开放源代码的编解码器,包含音效、视频、文字与元数据的处理。其中,Theora是开源的免费的视频压缩编码技术,质量可以与主流的数字视频压缩编解码标准H. | + | Ogg:指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器,可以纳入各式各样自由和开放源代码的编解码器,包含音效、视频、文字与元数据的处理。其中,Theora是开源的免费的视频压缩编码技术,质量可以与主流的数字视频压缩编解码标准H.264相媲美;Vorbis是 Ogg的音频编码,类似于MP3等的音乐格式,但是它是完全免费、开放和没有专利限制的。 |
====MPEG 4==== | ====MPEG 4==== | ||
第36行: | 第48行: | ||
====WebM==== | ====WebM==== | ||
WebM:指带有VP8视频编码和Vorbis音频编码的WebM文件。WebM由Google提出,是一个开放、免费的媒体文件格式,其中Google将其拥有的VP8视频编码技术开源,Ogg Vorbis本来就是开放格式。WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式,其重点是解决视频服务这一核心的网络用户体验。 | WebM:指带有VP8视频编码和Vorbis音频编码的WebM文件。WebM由Google提出,是一个开放、免费的媒体文件格式,其中Google将其拥有的VP8视频编码技术开源,Ogg Vorbis本来就是开放格式。WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式,其重点是解决视频服务这一核心的网络用户体验。 | ||
+ | |||
+ | ===基本属性=== | ||
+ | ====src 和controls属性==== | ||
+ | src和controls是<video>标签的基本属性,src属性用于设置视频文件的路径,controls属性用于为视频提供播放控件,并且<video></video>标签之间还可以插入文字,用于浏览器不能支持视频的时候显示。例如: | ||
+ | |||
+ | <nowiki><video src="vedio1.mp4" controls> | ||
+ | 浏览器不支持该视频,请下载最新版本的浏览器 | ||
+ | </video></nowiki> | ||
+ | |||
+ | 注意:苹果操作系统的Safari浏览器只支持 MP4类型,而ogg格式的视频则是适用于Firefox、Opera以及Chrome 浏览器。IE 8不支持video元素,IE 9开始提供了对使用 MPEG4的video元素的支持。 | ||
+ | |||
+ | ====source元素==== | ||
+ | 如果我们不确定自己的浏览器支持什么格式的视频,可以使用source元素给浏览器提供多种格式的视频文件选择。 | ||
+ | |||
+ | video元素允许嵌套多个source元素,source元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。例如: | ||
+ | |||
+ | <nowiki><video width="500" height="250" controls="controls"> | ||
+ | <source src="movie.ogg" type="video/ogg"> | ||
+ | <source src="movie.mp4" type="video/mp4"> | ||
+ | 您的浏览器不支持此种视频格式。 | ||
+ | </video></nowiki> | ||
+ | |||
+ | 其他常用属性: | ||
+ | |||
+ | *width 像素或百分比 设置视频播放窗口的宽度 | ||
+ | *height 像素或百分比 设置视频播放窗口的高度 | ||
+ | *autoplay autoplay 当页面载入完成后自动播放视频。 | ||
+ | *loop loop 视频结束时重新开始播放。 | ||
+ | *preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。 | ||
+ | |||
+ | width、height属性用于设置视频播放窗口的宽高。在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面的布局不产生变化。 | ||
+ | |||
+ | 视频播放时有时上下还有黑边框,用户体验很不好。为了让视频在web端自适应,可以设置video标签属性宽度为100%,高度为auto,如下: | ||
+ | |||
+ | <nowiki>video { | ||
+ | /*width:100%*/ | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | }</nowiki> | ||
+ | |||
+ | 如果width属性设置为 100%,视频播放器会根据屏幕大小自动调整比例,且可以比原始尺寸大;max-width 属性设置为 100%,视频播放器会根据屏幕自动调整比例,但不会超过其原始大小。 | ||
+ | |||
+ | autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉表示不自动播放。 | ||
+ | |||
+ | <nowiki><video width="500" height="350" src="vedio1.mp4" autoplay="autoplay" ></video></nowiki> | ||
+ | |||
+ | 注意,表示自动播放时该属性要么没有值,要么其值恒等于属性名;而在标签中不使用该属性表示不自动播放。 | ||
+ | |||
+ | loop属性用于指定视频是否循环播放,同样也是一个布尔属性。 | ||
+ | |||
+ | <nowiki><video width="500" height="350" src="vedio1.mp4" autoplay loop></video></nowiki> | ||
+ | |||
+ | preload属性用于定义视频是否预加载。有三个属性值可选择:none、metadata、auto。如果不使用此属性,默认为auto。 | ||
+ | |||
+ | <nowiki><video src="vedio1.mp4" autoplay preload="none"></video></nowiki> | ||
+ | |||
+ | *none:不进行预加载。选择此属性值多数情况是开发者认为用户不期望此视频,或者为了减少HTTP请求。 | ||
+ | *metadata:部分预加载。选用此属性值预先为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。 | ||
+ | *auto:全部预加载。为用户预先加载了该视频。 | ||
+ | |||
+ | ==web上的音频== | ||
+ | HTML5出现之前在网页中播放音频也没有固定的标准,大多数音频是通过插件(如Flash)来播放的,但是并非所有浏览器都有同样的插件,尤其是主流浏览器已经纷纷宣布停止支持Flash插件,网站正在转向开放的web技术。 | ||
+ | |||
+ | HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 | ||
+ | |||
+ | ===audio元素支持的音频格式=== | ||
+ | Ogg Vorbis:Ogg Vorbis是一种音频压缩格式,类似于MP3等音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg",这种文件的设计格式非常先进,可以在未来的任何播放器上播放,因此,这种文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。 | ||
+ | |||
+ | MP3:是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。 | ||
+ | |||
+ | wav:是录音时用的标准的Windows文件格式,文件的扩展名为“wav”,数据本身的格式为PCM或压缩型,属于无损音乐格式的一种。 | ||
+ | |||
+ | ===语法格式=== | ||
+ | audio元素语法格式: | ||
+ | |||
+ | <nowiki><audio src="音频文件路径" controls> | ||
+ | 您的浏览器不支持audio标签 | ||
+ | </audio></nowiki> | ||
+ | |||
+ | src 属性描述了音频文件的地址 (URL),controls属性规定浏览器为音频提供播放控件。 | ||
+ | |||
+ | ===其他常用属性=== | ||
+ | *autoplay autoplay 当页面载入完成后自动播放音频。 | ||
+ | *loop loop 音频结束时重新开始播放。 | ||
+ | *preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 | ||
+ | |||
+ | ===音频中的source元素=== | ||
+ | 目前所有的主流PC、移动端浏览器的最新版已经全部支持了mp3格式,Ogg文件格式的音频可以在 Firefox、Opera和Chrome浏览器下播放,如果要在Internet Explorer和Safari浏览器播放音频,则必须使用 MP3 文件。 | ||
+ | |||
+ | 为了解决不同浏览器对音频文件的兼容性,在HTML5中,仍然可以运用source元素可以为audio元素提供多个备用文件。 | ||
+ | |||
+ | <nowiki><audio controls="controls"> | ||
+ | <source src="音频文件地址" type="媒体文件类型/格式"> | ||
+ | <source src="音频文件地址" type="媒体文件类型/格式"> | ||
+ | …… | ||
+ | </audio></nowiki> | ||
+ | |||
+ | <nowiki><audio controls> | ||
+ | <source src="music.ogg" type="audio/ogg"> | ||
+ | <source src="music.mp3" type="audio/mpeg"> | ||
+ | 您的浏览器不支持 audio 元素。 | ||
+ | </audio> | ||
+ | </nowiki> | ||
+ | |||
+ | ==实训任务== | ||
+ | 完成网上商城首页中的视频广告部分,使用默认的视频控制栏。 | ||
+ | |||
+ | [[文件:web20122701.png|600px]] |
2020年12月27日 (日) 07:33的版本
目录
滚动字幕
- 源代码:
<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>标签来定义视频播放器,不仅仅设置了要播放的视频文件,还包括视频的控制栏,例如播放、暂停、进度和音量控制、全屏等功能,更重要的是还可以自定义这些功能和控制栏的样式。
视频格式
video元素目前仅支持三种格式的视频文件。
在HTML5中支持的视频格式主要包括Ogg、MPEG 4、WebM等。
Ogg
Ogg:指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器,可以纳入各式各样自由和开放源代码的编解码器,包含音效、视频、文字与元数据的处理。其中,Theora是开源的免费的视频压缩编码技术,质量可以与主流的数字视频压缩编解码标准H.264相媲美;Vorbis是 Ogg的音频编码,类似于MP3等的音乐格式,但是它是完全免费、开放和没有专利限制的。
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>
其他常用属性:
- width 像素或百分比 设置视频播放窗口的宽度
- height 像素或百分比 设置视频播放窗口的高度
- autoplay autoplay 当页面载入完成后自动播放视频。
- loop loop 视频结束时重新开始播放。
- preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。
width、height属性用于设置视频播放窗口的宽高。在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面的布局不产生变化。
视频播放时有时上下还有黑边框,用户体验很不好。为了让视频在web端自适应,可以设置video标签属性宽度为100%,高度为auto,如下:
video { /*width:100%*/ max-width: 100%; height: auto; }
如果width属性设置为 100%,视频播放器会根据屏幕大小自动调整比例,且可以比原始尺寸大;max-width 属性设置为 100%,视频播放器会根据屏幕自动调整比例,但不会超过其原始大小。
autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉表示不自动播放。
<video width="500" height="350" src="vedio1.mp4" autoplay="autoplay" ></video>
注意,表示自动播放时该属性要么没有值,要么其值恒等于属性名;而在标签中不使用该属性表示不自动播放。
loop属性用于指定视频是否循环播放,同样也是一个布尔属性。
<video width="500" height="350" src="vedio1.mp4" autoplay loop></video>
preload属性用于定义视频是否预加载。有三个属性值可选择:none、metadata、auto。如果不使用此属性,默认为auto。
<video src="vedio1.mp4" autoplay preload="none"></video>
- none:不进行预加载。选择此属性值多数情况是开发者认为用户不期望此视频,或者为了减少HTTP请求。
- metadata:部分预加载。选用此属性值预先为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。
- auto:全部预加载。为用户预先加载了该视频。
web上的音频
HTML5出现之前在网页中播放音频也没有固定的标准,大多数音频是通过插件(如Flash)来播放的,但是并非所有浏览器都有同样的插件,尤其是主流浏览器已经纷纷宣布停止支持Flash插件,网站正在转向开放的web技术。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio元素支持的音频格式
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属性规定浏览器为音频提供播放控件。
其他常用属性
- autoplay autoplay 当页面载入完成后自动播放音频。
- loop loop 音频结束时重新开始播放。
- preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
音频中的source元素
目前所有的主流PC、移动端浏览器的最新版已经全部支持了mp3格式,Ogg文件格式的音频可以在 Firefox、Opera和Chrome浏览器下播放,如果要在Internet Explorer和Safari浏览器播放音频,则必须使用 MP3 文件。
为了解决不同浏览器对音频文件的兼容性,在HTML5中,仍然可以运用source元素可以为audio元素提供多个备用文件。
<audio controls="controls"> <source src="音频文件地址" type="媒体文件类型/格式"> <source src="音频文件地址" type="媒体文件类型/格式"> …… </audio>
<audio controls> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
实训任务
完成网上商城首页中的视频广告部分,使用默认的视频控制栏。