网站维护 静态页面,wordpress前端会员中心,搞好姓氏源流网站建设,网页设计论文500字除了图像#xff0c;网页还可以放置视频和音频。
1.video
video标签是一个块级元素#xff0c;用于放置视频。如果浏览器支持加载的视频格式#xff0c;就会显示一个播放器#xff0c;否则显示video内部的子元素。
video srcexample.…除了图像网页还可以放置视频和音频。
1.video
video标签是一个块级元素用于放置视频。如果浏览器支持加载的视频格式就会显示一个播放器否则显示video内部的子元素。
video srcexample.mp4 controlsp你的浏览器不支持 HTML5 视频请下载a hrefexample.mp4视频文件/a。/p
/video上面代码中如果浏览器不支持该种格式的视频就会显示video内部的文字提示。
video有以下属性。
src视频文件的网址。controls播放器是否显示控制栏。该属性是布尔属性不用赋值只要写上属性名就表示打开。如果不想使用浏览器默认的播放器而想使用自定义播放器就不要使用该属性。width视频播放器的宽度单位像素。height视频播放器的高度单位像素。autoplay视频是否自动播放该属性为布尔属性。loop视频是否循环播放该属性为布尔属性。muted是否默认静音该属性为布尔属性。poster视频播放器的封面图片的 URL。preload视频播放之前是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值分别是none不缓冲、metadata仅仅缓冲视频文件的元数据、auto可以缓冲整个文件。playsinlineiPhone 的 Safari 浏览器播放视频时会自动全屏该属性可以禁止这种行为。该属性为布尔属性。crossorigin是否采用跨域的方式加载视频。它可以取两个值分别是anonymous跨域请求时不发送用户凭证主要是 Cookieuse-credentials跨域时发送用户凭证。currentTime指定当前播放位置双精度浮点数单位为秒。如果尚未开始播放则会从这个属性指定的位置开始播放。duration该属性只读指示时间轴上的持续播放时间总长度值为双精度浮点数单位为秒。如果是流媒体没有已知的结束时间属性值为Infinity。
下面是一个例子。
video width400 height400autoplay loop mutedposterposter.png
/video上面代码中视频播放器的大小是 400 x 400会自动播放和循环播放并且静音还带有封面图。这是网站首页背景视频的常见写法。
HTML 标准没有规定浏览器需要支持哪些视频格式完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式可以使用source标签放置同一个视频的多种格式。
video controlssource srcexample.mp4 typevideo/mp4source srcexample.webm typevideo/webmp你的浏览器不支持 HTML5 视频请下载a hrefexample.mp4视频文件/a。/p
/video上面代码中source标签的type属性的值是视频文件的 MIME 类型上例指定了两种格式的视频文件MP4 和 WebM。如果浏览器支持 MP4就加载 MP4 格式的视频不再往下执行了。如果不支持 MP4就检查是否支持 WebM如果还是不支持则显示提示。
2.audio
audio标签是一个块级元素用于放置音频用法与video标签基本一致。
audio controlssource srcfoo.mp3 typeaudio/mp3source srcfoo.ogg typeaudio/oggp你的浏览器不支持 HTML5 音频请直接下载a hreffoo.mp3音频文件/a。/p
/audio上面代码中audio标签内部使用source标签指定了两种音频格式优先使用 MP3 格式如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频则提供下载链接。
audio标签的属性与video标签类似参见上一节。
autoplay是否自动播放布尔属性。controls是否显示播放工具栏布尔属性。如果不设置浏览器不显示播放界面通常用于背景音乐。crossorigin是否使用跨域方式请求。loop是否循环播放布尔属性。muted是否静音布尔属性。preload音频文件的缓冲设置。src音频文件网址。
3.track
track标签用于指定视频的字幕格式是 WebVTT .vtt文件放置在video标签内部。它是一个单独使用的标签没有结束标签。
video controls srcsample.mp4track label英文 kindsubtitles srcsubtitles_en.vtt srclangentrack label中文 kindsubtitles srcsubtitles_cn.vtt srclangcn default
/video上面代码指定视频文件的英文字幕和中文字幕。
track标签有以下属性。
label播放器显示的字幕名称供用户选择。kind字幕的类型默认是subtitles表示将原始声音成翻译外国文字比如英文视频提供中文字幕。另一个常见的值是captions表示原始声音的文字描述通常是视频原始使用的语言比如英文视频提供英文字幕。srcvtt 字幕文件的网址。srclang字幕的语言必须是有效的语言代码。default是否默认打开布尔属性。
4.source
source标签用于picture、video、audio的内部用于指定一项外部资源。单标签是单独使用的没有结束标签。
它有如下属性具体示例请参见相应的容器标签。
type指定外部资源的 MIME 类型。src指定源文件用于video和audio。srcset指定不同条件下加载的图像文件用于picture。media指定媒体查询表达式用于picture。sizes指定不同设备的显示大小用于picture必须跟srcset搭配使用。
5.embed
embed标签用于嵌入外部内容这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致很可能不是所有浏览器的用户都能访问这部分内容建议谨慎使用。
下面是嵌入视频播放器的例子。
embed typevideo/webmsrc/media/examples/flower.mp4width250height200上面代码嵌入的视频将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件视频就无法播放。
embed标签具有如下的通用属性。
height显示高度单位为像素不允许百分比。width显示宽度单位为像素不允许百分比。src嵌入的资源的 URL。type嵌入资源的 MIME 类型。
浏览器通过type属性得到嵌入资源的 MIME 类型一旦该种类型已经被某个插件注册了就会启动该插件负责处理嵌入的资源。
下面是 QuickTime 插件播放 MOV 视频文件的例子。
embed typevideo/quicktime srcmovie.mov width640 height480下面是启动 Flash 插件的例子。
embed srcwhoosh.swf qualitymediumbgcolor#ffffff width550 height400namewhoosh alignmiddle allowScriptAccesssameDomainallowFullScreenfalse typeapplication/x-shockwave-flashpluginspagehttp://www.macromedia.com/go/getflashplayer上面代码中如果浏览器没有安装 Flash 插件就会提示去pluginspage属性指定的网址下载。
6.objectparam
object标签作用跟embed相似也是插入外部资源由浏览器插件处理。它可以视为embed的替代品有标准化行为只限于插入少数几种通用资源没有历史遗留问题因此更推荐使用。
下面是插入 PDF 文件的例子。
object typeapplication/pdfdata/media/examples/In-CC0.pdfwidth250height200
/object上面代码中如果浏览器安装了 PDF 插件就会在网页显示 PDF 浏览窗口。
object具有如下的通用属性。
data嵌入的资源的 URL。form当前网页中相关联表单的id属性如果有的话。height资源的显示高度单位为像素不能使用百分比。width资源的显示宽度单位为像素不能使用百分比。type资源的 MIME 类型。typemustmatch布尔属性表示data属性与type属性是否必须匹配。
下面是插入 Flash 影片的例子。
object datamovie.swftypeapplication/x-shockwave-flash/objectobject标签是一个容器元素内部可以使用param标签给出插件所需要的运行参数。
object datamovie.swf typeapplication/x-shockwave-flashparam namefoo valuebar
/object
