HTML学习笔记(六)--HTML对象object

HTML对象object

<object> 的作用是支持 HTML 助手(插件)。
辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频音频的一个优势是,您能够允许用户来控制部分或全部播放设置。
大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。

1. HTML 音频

  1. 使用插件
  2. 使用 <embed> 元素:定义外部(非 HTML)内容的容器
    <embed height="100" width="100" src="song.mp3" />

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。

  1. 使用 <object> 元素:可以定义外部(非 HTML)内容的容器。
    <object height="100" width="100" data="song.mp3"></object>

  2. 使用 HTML5 <audio> 元素

<audio controls="controls">
  <source src="./Sound/song.mp3" type="audio/mp3" />
Your browser does not support this audio format.
</audio>

<audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在所有浏览器中都有效。

最好的解决方案:

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

2. HTML 视频

  1. 使用 <embed> 标签
    <embed src="movie.swf" height="200" width="200"/>
  2. 使用 <object> 标签
    <object width="320" height="240" data="/i/bookmark.swf"></object>
  3. 使用 <video> 标签
    <video> 是 HTML 5 中的新标签。
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

问题很多,有的在Edge浏览器上不能打开,显示无效源例如ogg文件,在Chrome浏览器上显示不出MP4文件的图像,原因不知。

最好的 HTML 解决方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

实例中视屏能在Chrome浏览器中播放,在Edge有时可以,有时不可以。不懂

使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:
<a href="movie.swf">Play a video file</a>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,641评论 25 709
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 6,650评论 0 16
  • 相信大家很多项目只能够用的都是友盟分享,那么我们就对友盟的调用进行机一部的封装,这样项目简单,方便改 都是干货拒绝...
    贝勒老爷阅读 3,452评论 0 6
  • 中午因为拉肚子,踩着高峰点去食堂,人山人海中,找寻着人最少的窗口。hh,粉丝饭就是你了。端着盘中餐到处看,希望能有...
    MORE_MAY阅读 1,558评论 0 0

友情链接更多精彩内容