视频音频

Posted 2020-09-28

浏览器有一些插件可以实现多媒体文件的处理，有些插件需要安装，有些是浏览器自带的。

那如何告诉浏览器，我要处理的文件是个需要插件执行的文件呢？

 

object 标签

定义一个嵌入的对象(图像、音频、视频、html、Java applets、ActiveX、PDF 以及 Flash)
有以下属性：
1. data: 规定对象使用的资源的 URL
2. form: 规定对象所属的一个或多个表单ID
3. height: 规定对象的高度
4. width: 规定对象的宽度
5. name: 为对象规定名称
6. type: 规定data属性中规定的数据的 MIME 类型(type="application/x-shockwave-flash")

1 <object width="400" height="50" data="bookmark.swf"></object>
2 
3 <object width="100%" height="500px" data="snippet.html"></object>
4 
5 <object data="audi.jpeg"></object>

View Code

 

embed标签

元素没有关闭标签。 不能使用替代文本
有以下属性：
1. height:
2. width:
3. type: 规定嵌入内容的 MIME 类型
4. src: 规定被嵌入内容的 URL

1 <embed width="100%" height="500px" src="snippet.html">
2 
3 <embed src="audi.jpeg">

View Code

 

 video标签

定义视频，比如电影片段或其他视频流,支持三种视频格式：MP4、WebM、Ogg
1. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的
2. <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
有以下属性：
1. autoplay: 如果出现该属性，则视频在就绪后马上播放
2. controls: 如果出现该属性，则向用户显示控件，比如播放按钮
3. height: 设置视频播放器的高度
4. width: 设置视频播放器的宽度
5. loop: 如果出现该属性，则当媒介文件完成播放后再次开始播放
6. muted: 如果出现该属性，视频的音频输出为静音
7. poster: 规定视频正在下载时显示的图像，直到用户点击播放按钮
8. src: 要播放的视频的URL

 1 <!-- 最优的html视频解决方案 -->
 2 <video width="320" height="240" controls>
 3   <source src="movie.mp4" type="video/mp4">
 4   <source src="movie.ogg" type="video/ogg">
 5   <source src="movie.webm" type="video/webm">
 6   <object data="movie.mp4" width="320" height="240">
 7     <embed src="movie.swf" width="320" height="240">
 8   </object> 
 9 </video>
10 
11 
12 <!-- 优酷： 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频 -->
13 <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
14 
15 
16 <!-- 如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
17 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件 -->
18 <a href="intro.swf">Play a video file</a>

View Code

 

audio标签

定义声音，比如音乐或其他音频流, 支持三种音频格式文件: MP3, Wav, 和 Ogg
1. 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 
2. <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
有以下属性：
1. autoplay: 如果出现该属性，则音频在就绪后马上播放
2. controls: 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
3. loop: 如果出现该属性，则每当音频结束时重新开始播放
4. muted: 如果出现该属性，则音频输出为静音
5. src: 规定音频文件的 URL

 1 <!-- 最优的解决方案 -->
 2 <audio controls height="100" width="100">
 3   <source src="horse.mp3" type="audio/mpeg">
 4   <source src="horse.ogg" type="audio/ogg">
 5   <embed height="50" width="100" src="horse.mp3">
 6 </audio>
 7 
 8 
 9 <!-- 雅虎媒体播放器, 雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表 -->
10 <a href="horse.mp3">Play Sound</a>
11 <script src="http://mediaplayer.yahoo.com/latest"></script>
12 
13 
14 <!-- 如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
15 以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件 -->
16 <a href="horse.mp3">Play the sound</a>

View Code

 

 

 

 

操作视频、音频

video、audio 元素与一般的标签有些区别，比较特殊，他们有一些共同的方法：

1. canPlayType(): 检测浏览器是否能播放指定的音频/视频类型
2. load(): 重新加载音频/视频元素
3. play: 开始播放音频/视频
4. pause(): 暂停当前播放的音频/视频

一些共同的属性

1. autoplay: 设置或返回是否在加载完成后随即播放音频/视频
2. buffered: 返回表示音频/视频已缓冲部分的 TimeRanges 对象
3. controls: 设置或返回音频/视频是否显示控件（比如播放/暂停等）
4. currentSrc： 返回当前音频/视频的 URL
5. currentTime: 设置或返回音频/视频中的当前播放位置（以秒计）
6. duration: 返回当前音频/视频的长度（以秒计）
7. ended: 返回音频/视频的播放是否已结束
8. loop: 设置或返回音频/视频是否应在结束时重新播放
9. muted: 设置或返回音频/视频是否静音
10. paused: 设置或返回音频/视频是否暂停
11. playbackRate: 设置或返回音频/视频播放的速度
12. played: 返回表示音频/视频已播放部分的 TimeRanges 对象
13. src: 设置或返回音频/视频元素的当前来源
14. volume: 设置或返回音频/视频的音量
15. readyState: 返回音频/视频当前的就绪状态

一些共同的事件

1. abort: 当音频/视频的加载已放弃时触发
2. canplay: 当浏览器可以开始播放音频/视频时触发
3. ended: 当目前的播放列表已结束时触发
4. error: 当在音频/视频加载期间发生错误时触发
5. pause: 当音频/视频已暂停时触发
6. play: 当音频/视频已开始或不再暂停时触发
7. playing: 当音频/视频在因缓冲而暂停或停止后已就绪时触发
8. progress: 当浏览器正在下载音频/视频时触发
9. ratechange: 当音频/视频的播放速度已更改时触发
10. volumechange: 当音量已更改时触发
11. waiting: 当视频由于需要缓冲下一帧而停止时触发
12. timeupdate: 当目前的播放位置已更改时触发