多媒体标签

<audio>

用于在文档中嵌入音频内容。可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source>元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream]将这个元素用于流式媒体。

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退。

属性

• src

  嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用<source>元素来替代该属性指定嵌入的音频。

• autoplay

  布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。（一般避免使用）

• controls

  如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

• loop

  布尔属性；如果声明该属性，将循环播放音频

• muted

  表示是否静音的布尔值。默认值为 false，表示有声音。

• preload

  枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。

  • none:示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
  • metadata:示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
  • 空字符串:等效于auto属性。

  不同浏览器会有自己的默认值，规范建议的默认值为 metadata.

  注意:autoplay属性的优先级高于preload,当使用autoplay时，preload自动失效

• 其他属性如crossorigin、currentTime等查询官网[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio]

事件

详情见官网

使用source加载

<audio controls>
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>

依次加载，直至到MP3格式

<video>

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio>元素可能在用户体验上更合适。

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

属性

• autoplay

  布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。

• buffered

  这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。

• controls

  加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

• height

  视频展示区域的高度，单位是CSS像素。

• width

  视频显示区域的宽度，单位是CSS像素。

• loop

  布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。

• muted

  布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。

• preload

  该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：

  • none:提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
  • metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
  • auto:用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
  • 空字符串:也就代指 auto 值。

  假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。

  autoplay优先于preload，同时设置autoplay和preload属性在规范里是允许的

• poster

  一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。

• src

  要嵌到页面的视频的URL。可选；你也可以使用video块内的<source>元素来指定需要嵌到页面的视频。

事件

详情见官网[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video]

示例

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

第一个例子播放一个视频，视频一收到，允许播放的时候就会立马开始播放，而不会停下来直到下载更多内容。 图片 “posterimage.jpg” 会一直展示在视频区域，直到开始播放。

第二个例子允许用户选择不同的字幕。

<embed>

HTML<embed>元素将这种外部内容嵌入文档中的指定位置。内容由应用程序或其他外部内容源（如浏览器插件）提供。

属性

• height

  资源显示的高度，以CSS像素为单位（仅限绝对值，没有百分比）

• src

  被压缩的资源的URL

• type

  用于选择插件实例化的MIME类型

• width

  资源显示的宽度，以css像素为单位(仅限绝对值，没有百分比)

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

<canvas>

<canvas>元素可以通过JavaScript（Canvas API 或WebGL API）绘制图形和图形动画。

属性

• height

  该元素占用空间的高度，以CSS像素（px）表示，默认为150

• width

  该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

注意事项

• 需要标签

  不同于<img>元素，canvas元素需要闭合标签

• 设置画布的大小

  直接在html标签中设置宽度和高度属性或者使用JavaScript来指定画布的尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。

  可以使用CSS的宽度和高度以在渲染期间缩放图像来适应样式大小，就像<img>元素一样。如果发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的高度和width 属性进行相关设置，而不要使用 CSS。

示例

HTML

<canvas id="canvas" width="300" height="300">
  抱歉，您的浏览器不支持canvas元素
  （这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
</canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);