本次介绍的属性是有浏览器限制的,很多老版本的浏览器不支持。就算支持,支持的格式也是有限的。

主要有以下两种:

  1. <video src=”movie.ogg” controls=”controls”></video>
  2. <audio src=”song.MP3″ controls=”controls”></audio>

一、实现方式

(1)video

  1. control属性供添加播放、暂停和音量控件。
  2. 同时也包含宽度和高度属性,可以调整视频规格。
  3. <video>与</video>之间可以插入内容,供不支持video元素浏览器显示。
  4. video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

QQ截图20151201155915

(2)audio

  1. control属性供添加播放、暂停和音量控件。
  2. <audio>与</audio>之间可以插入内容,供不支持audio元素的浏览器显示。
  3. audio元素允许多个source元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式。

QQ截图20151201160129

二、具体实现

(1)强制设置视频长宽

实现效果:

可以看到height、width属性的效果并不好。虽然缩小了尺寸,但是依旧占了很大的空白区域。

(2)不设置视频长宽

实现效果为:

QQ截图20151201160658

基本上是原版视频的大小。

(3)放在div块中调节大小

如果要调节尺寸,可以把video放在div块,然后定义div的尺寸,就能起到调节效果。

实现效果:

QQ截图20151201161458

大小适中,通过div块控制大小非常方便,可以做自适应。

三、总结

记录一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注