HTML - 10 多媒体标签

本教程原出处：网道
本教程文档在原作基础上进行了一定的补充、修改和完善，以满足个人学习、工作中的需要，亦可作为个人口袋书使用。
本教程文档中的原文部分，其版权仍归原作者所有。
本教程文档仅作个人学习、教学和工作使用，任何他人、或机构、组织不得恶意传播、复制本文档，或将本教程文档用做商用

多媒体标签

• 除了图像，网页还可以放置视频和音频。
• <video>

• <video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

<video src="example.mp4" controls>
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

• 上面代码中，如果浏览器不支持该种格式的视频，就会显示<video>内部的文字提示。
• <video>有以下属性。

• src：视频文件的网址。
• controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。
• width：视频播放器的宽度，单位像素。
• height：视频播放器的高度，单位像素。
• autoplay：视频是否自动播放，该属性为布尔属性。
• loop：视频是否循环播放，该属性为布尔属性。
• muted：是否默认静音，该属性为布尔属性。
• poster：视频播放器的封面图片的 URL。
• preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none（不缓冲）、metadata（仅仅缓冲视频文件的元数据）、auto（可以缓冲整个文件）。
• playsinline：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。
• crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous（跨域请求时，不发送用户凭证，主要是 Cookie），>>>* use-credentials（跨域时发送用户凭证）。
• currentTime：指定当前播放位置（双精度浮点数，单位为秒）。如果尚未开始播放，则会从这个属性指定的位置开始播放。
• duration：该属性只读，指示时间轴上的持续播放时间（总长度），值为双精度浮点数（单位为秒）。如果是流媒体，没有已知的结束时间，属性值为+Infinity。

• <audio>
  
• <track>

• <source>
  
• <embed>
  >>* 下面是 QuickTime 插件播放 MOV 视频文件的例子。

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

• 下面是启动 Flash 插件的例子。

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

• 上面代码中，如果浏览器没有安装 Flash 插件，就会提示去pluginspage属性指定的网址下载。

• <object>，<param>

• 下面是插入 Flash 影片的例子。

<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

• <object>标签是一个容器元素，内部可以使用<param>标签，给出插件所需要的运行参数。

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>