zoukankan      html  css  js  c++  java
  • 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813

    一、视频播放

    1. <html>  
    2.     <head>  
    3.         <title>多媒体播放</title>  
    4.     </head>  
    5.     <body>  
    6.         <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    7.     </body>  
    8. </html>  

    效果如下:

    <embed> 标签是 HTML 5 中的新标签。

    属性

    HTML5 中的新属性。

    属性描述
    heightpixels设置嵌入内容的高度。
    srcurl嵌入内容的 URL。
    typetype定义嵌入内容的类型。
    widthpixels设置嵌入内容的宽度。

    <embed>标签支持HTML5中的全局属性,同时支持HTML5中的事件属性
    下面我们来添加一个width属性试一下
    1. <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>  
    type 属性规定被嵌入内容的 MIME 类型。

    有关MIME类型请参阅 IANA MIME 类型

    例如:
    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4.   
    5. <embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
    6.   
    7. </body>  
    8. </html>  

    二、IANA MIME简介

    多用途互联网邮件扩展类型就是设定某种扩展名文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义文件名,以及一些媒体文件打开方式。

    每个MIME类型由两部分组成,前面是数据的大类别,例如声音audio、图象image等,后面定义具体的种类。
    常见的MIME类型(通用型):
    超文本标记语言文本 .html text/html
    xml文档 .xml text/xml
    XHTML文档 .xhtml application/xhtml+xml
    普通文本 .txt text/plain
    RTF文本 .rtf application/rtf
    PDF文档 .pdf application/pdf
    Microsoft Word文件 .word application/msword
    PNG图像 .png image/png
    GIF图形 .gif image/gif
    JPEG图形 .jpeg,.jpg image/jpeg
    au声音文件 .au audio/basic
    MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
    RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
    MPEG文件 .mpg,.mpeg video/mpeg
    AVI文件 .avi video/x-msvideo
    GZIP文件 .gz application/x-gzip
    TAR文件 .tar application/x-tar
    任意的二进制数据 application/octet-stream
    三、HTML5简介

    HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

    HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

    HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持

    HTML5 是 W3C 与 WHATWG 合作的结果。

    ——W3C 指 World Wide Web Consortium,万维网联盟。

    ——WHATWG 指 Web Hypertext Application Technology Working Group。

    WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

    为 HTML5 建立的一些规则:

    • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript
    • 减少对外部插件的需求(比如 Flash)——内置了很多强大的多媒体标签
    • 更优秀的错误处理
    • 更多取代脚本的标记
    • HTML5 应该独立于设备——可以在PC和移动设备上完美运行
    • 开发进程应对公众透明

    HTML5 中的一些有趣的新特性:

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search

    关于更多详细的HTML5可以参考我的博客专题:http://blog.csdn.net/column/details/dawanganban-html5.html

    最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

    四、HTML5中的全局属性
    下面的全局属性可用于任何HTML5元素
    属性描述
    accesskey规定访问元素的键盘快捷键
    class规定元素的类名(用于规定样式表中的类)。
    contenteditable规定是否允许用户编辑内容。
    contextmenu规定元素的上下文菜单。
    dir规定元素中内容的文本方向。
    draggable规定是否允许用户拖动元素。
    dropzone规定当被拖动的项目/数据被拖放到元素中时会发生什么。
    hidden规定该元素是无关的。被隐藏的元素不会显示。
    id规定元素的唯一 ID。
    lang规定元素中内容的语言代码。
    spellcheck规定是否必须对元素进行拼写或语法检查。
    style规定元素的行内样式。
    tabindex规定元素的 tab 键控制次序。
    title规定有关元素的额外信息。

    五、全局事件属性

    HTML 4 增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段 JavaScript。

    下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。

    Window 事件属性

    window 对象触发的事件。

    适用于 <body> 标签: 标颜色的是新标签(html5)

    属性描述
    onafterprintscript在打印文档之后运行脚本
    onbeforeprintscript在文档打印之前运行脚本
    onbeforeonloadscript在文档加载之前运行脚本
    onblurscript当窗口失去焦点时运行脚本
    onerrorscript当错误发生时运行脚本
    onfocusscript当窗口获得焦点时运行脚本
    onhaschangescript当文档改变时运行脚本
    onloadscript当文档加载时运行脚本
    onmessagescript当触发消息时运行脚本
    onofflinescript当文档离线时运行脚本
    ononlinescript当文档上线时运行脚本
    onpagehidescript当窗口隐藏时运行脚本
    onpageshowscript当窗口可见时运行脚本
    onpopstatescript当窗口历史记录改变时运行脚本
    onredoscript当文档执行再执行操作(redo)时运行脚本
    onresizescript当调整窗口大小时运行脚本
    onstoragescript当文档加载加载时运行脚本
    onundoscript当 Web Storage 区域更新时(存储空间中的数据发生变化时)
    onunloadscript当用户离开文档时运行脚本

    表单事件

    由 HTML 表单内部的动作触发的事件。

    适用于所有 HTML 5 元素,不过最常用于表单元素中

    属性描述
    onblurscript当元素失去焦点时运行脚本
    onchangescript当元素改变时运行脚本
    oncontextmenuscript当触发上下文菜单时运行脚本
    onfocusscript当元素获得焦点时运行脚本
    onformchangescript当表单改变时运行脚本
    onforminputscript当表单获得用户输入时运行脚本
    oninputscript当元素获得用户输入时运行脚本
    oninvalidscript当元素无效时运行脚本
    onresetscript当表单重置时运行脚本。HTML 5 不支持。
    onselectscript当选取元素时运行脚本
    onsubmitscript当提交表单时运行脚本

    键盘事件

    由键盘触发的事件。

    适用于所有 HTML 5 元素:

    属性描述
    onkeydownscript当按下按键时运行脚本
    onkeypressscript当按下并松开按键时运行脚本
    onkeyupscript当松开按键时运行脚本

    鼠标事件

    由鼠标或相似的用户动作触发的事件。

    适用于所有 HTML 5 元素:

    属性描述
    onclickscript当单击鼠标时运行脚本
    ondblclickscript当双击鼠标时运行脚本
    ondragscript当拖动元素时运行脚本
    ondragendscript当拖动操作结束时运行脚本
    ondragenterscript当元素被拖动至有效的拖放目标时运行脚本
    ondragleavescript当元素离开有效拖放目标时运行脚本
    ondragoverscript当元素被拖动至有效拖放目标上方时运行脚本
    ondragstartscript当拖动操作开始时运行脚本
    ondropscript当被拖动元素正在被拖放时运行脚本
    onmousedownscript当按下鼠标按钮时运行脚本
    onmousemovescript当鼠标指针移动时运行脚本
    onmouseoutscript当鼠标指针移出元素时运行脚本
    onmouseoverscript当鼠标指针移至元素之上时运行脚本
    onmouseupscript当松开鼠标按钮时运行脚本
    onmousewheelscript当转动鼠标滚轮时运行脚本
    onscrollscript当滚动元素滚动元素的滚动条时运行脚本

    媒介事件

    由视频、图像以及音频等媒介触发的事件。

    适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio、embed、img、object 以及 video)中最常用:

    属性描述
    onabortscript当发生中止事件时运行脚本
    oncanplayscript当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
    oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
    ondurationchangescript当媒介长度改变时运行脚本
    onemptiedscript当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本
    onendedscript当媒介已抵达结尾时运行脚本
    onerrorscript当在元素加载期间发生错误时运行脚本
    onloadeddatascript当加载媒介数据时运行脚本
    onloadedmetadatascript当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
    onloadstartscript当浏览器开始加载媒介数据时运行脚本
    onpausescript当媒介数据暂停时运行脚本
    onplayscript当媒介数据将要开始播放时运行脚本
    onplayingscript当媒介数据已开始播放时运行脚本
    onprogressscript当浏览器正在取媒介数据时运行脚本
    onratechangescript当媒介数据的播放速率改变时运行脚本
    onreadystatechangescript当就绪状态(ready-state)改变时运行脚本
    onseekedscript当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
    onseekingscript当媒介元素的定位属性为真且定位已开始时运行脚本
    onstalledscript当取回媒介数据过程中(延迟)存在错误时运行脚本
    onsuspendscript当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
    ontimeupdatescript当媒介改变其播放位置时运行脚本
    onvolumechangescript当媒介改变音量亦或当音量被设置为静音时运行脚本
    onwaitingscript当媒介已停止播放但打算继续播放时运行脚本

    下一篇将详细介绍全局属性及事件的用法

  • 相关阅读:
    laravel 服务提供者
    乐观锁和悲观锁
    MySQL索引原理及慢查询优化
    Laravel Session保存机制和terminate中间件
    laravel session踩坑
    理解 JavaScript 的 async/await(转)
    知识点
    js异步
    Office使用笔记
    YUM常用命令
  • 原文地址:https://www.cnblogs.com/wanghang/p/6298969.html
Copyright © 2011-2022 走看看