HTML的音频和视频_html/css_WEB-ITnose
前面的话
多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方法是查看文件扩展名。如.swf、.wmv、.mp3、.mp4
媒体格式
音频格式
.mid/.midi
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。大多数流行的网络浏览器都支持 MIDI
.rm/.ram
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低
.wav
Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它
.wma
WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用
.mp3/.mpga
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式
视频格式
.avi
AVI (Audio Video Interleave) 格式是由微软开发的。所有运行Windows的计算机都支持AVI格式
.wmv
Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外组件,就无法播放 Windows Media 电影
.mpg/.mpeg
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持
.mov
QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是QuickTime 电影不能在没有安装额组件的Windows计算机上播放
.rm/.ram
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低
.swf/.flv
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放
.mp4
Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。越来越多的视频发布者将其作为 Flash 播放器和 HTML5 的因特网共享格式
元素
插件元素
用来定义嵌入内容,比如flash插件
[注意]由于移动端设备对flash等浏览器插件支持比较差,IOS设备完全不支持,因此不建议使用flash,如果需要播放音频视频,可以使用video和audio来调用浏览器原生的播放器
【属性】
height 设置嵌入内容的高度width 设置嵌入内容的宽度src 设置嵌入内容的URLtype 设置嵌入内容的类型
定义一个嵌入的对象
object可以嵌套object或其他元素,如果浏览器不能渲染优先的选择就显示后备的内容
【属性】
height 设置嵌入对象的高度width 设置嵌入对象的宽度type 设置嵌入对象的类型 name 设置对象的名称,以便在脚本中使用data 设置对象的URLusemap 设置与对象一同使用的客户端图像映射的URLform 规定对象所属的一个或多个表单(将object作为表单的一部分是为了解决让插件发送数据到服务器的需要)typemustmatch 检测资源类型和type属性是否相符(data和type同时设置的情况下)
用来给内嵌的插件传递参数
【属性】
name 定义参数的名称value 规定参数的值type 规定参数的MIME类型valuetype 规定值的MIME类型(data/ref/object)
HTML5元素
HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是
这两个标签支持的类型为:
视频 [1]video/ogg [2]video/mp4 [3]video/webm
音频 [1]audio/ogg [2]audio/mpeg
关于
HTML音频
在HTML中播放音频的方法有很多种
【1】
【2】
【3】
Play the sound
【5】更好的解决办法
HTML视频
在HTML中播放视频的方法也有好多种
【1】
【2】
【3】
Play the video
【5】更好的解决办法
下一篇: 在vue中如何实现类似淘宝星级评分