学习 HTML 在线

319HTML5Video(视频)

<p>听说 HTML5 将重塑富Web应用的未来 HTML5中video标签与传统的object标签的不同.</p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">section</span><span style="color: blue;">&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">h1</span><span style="color: blue;">&gt;</span>使用HTML5的video标签播放视频<span style="color: blue;">&lt;/</span><span style="color: maroon;">h1</span><span style="color: blue;">&gt;</span><br><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">src</span><span style="color: blue;">="video1.mp4"</span><span style="color: blue;">&gt;</span>&nbsp;&nbsp; <span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span><br><span style="color: blue;">&lt;/</span><span style="color: maroon;">section</span><span style="color: blue;">&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">section</span><span style="color: blue;">&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">h1</span><span style="color: blue;">&gt;</span>使用Flash插件播放视频<span style="color: blue;">&lt;/</span><span style="color: maroon;">h1</span><span style="color: blue;">&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">object</span><span style="color: red;">type</span><span style="color: red;">="application/x-shockwave-flash"</span>&nbsp; <span style="color: red;">data</span><span style="color: blue;">="player.swf"</span><span style="color: red;">width</span><span style="color: blue;">="290"</span><span style="color: red;">height</span><span style="color: blue;">="24"&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">param</span><span style="color: red;">name</span><span style="color: blue;">="movie"</span><span style="color: red;">value</span><span style="color: blue;">="player.swf"&gt;</span> <span style="color: blue;">&lt;/</span><span style="color: maroon;">object</span><span style="color: blue;">&gt;</span><span style="color: blue;">&lt;/</span><span style="color: maroon;">section</span><span style="color: blue;">&gt;</span></p><p>&lt;video&gt;标记是一个用来播放媒体的标准, 不必猜测浏览器是否要安装特定的某个版本插件 这个标准正是HTML之前最为缺少的那部分</p><p>&nbsp;</p><p><strong><span style="font-size: 14px;"><span style="color: rgb(255, 153, 0);">HTML5</span><span style="color: rgb(255, 153, 0);">支持的媒体格式</span></span></strong></p><p>HTML5支持AAC, MP3 和 Ogg Vorbis三种音频格式 <br></p><p>Ogg Theora, WebM 和MPEG-4三种视频格式.</p><p>但并不是所有浏览器都支持所有的格式</p><p><br></p><p>浏览器视频格式音频格式<br>&nbsp;Ogg TheoraH.264VP8 (WebM)Ogg VorbisMP3Wav<br>Internet Explorer手动安装9.0手动安装NoYesNo<br>Mozilla Firefox3.5No4.0YesNoYes<br>Google Chrome3.0No6.0YesYesYes<br>Safari手动安装3手动安装NoYesYes<br>Opera10.50No10.60YesNoYes<br></p><p>&nbsp;</p><p><b>属性值描述</b><br>&nbsp;MutedMuted定义的音频的初始状态 目前仅支持muted.<br>&nbsp;Crossorigin定义当前视频是否是一个跨域的项目.<br>&nbsp;MediagroupID将多个视频或音频集合在一起,并结合MediaController实现同步控制.<br>&nbsp;AutoplayAutoplay如果指定,视频会在准备好(如已取得可播放视频)后自动播放.<br>&nbsp;ControlsControls添加播放控制及音量控制功能栏.<br>&nbsp;HeightPixels指定播放器的高度,以pixel为单位.<br>&nbsp;LoopLoop如果指定,视频将重复播放.<br>&nbsp;Posterurl指定视频的预览图.<br>&nbsp;Preload 如果指定 视频会在加页面加载过程中被加载 当Autoplay被指定时 会被忽略。<br>&nbsp;Srcurl目标视频的URL.<br>&nbsp;WidthPixels指定播放器的宽度,以pixel为单位 <br></p><p>&nbsp;包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示).</p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">src</span><span style="color: blue;">="video.mp4"</span><span style="color: red;">width</span><span style="color: blue;">="320"</span><span style="color: red;">height</span><span style="color: blue;">="240"</span><span style="color: red;">autoplay</span><span style="color: red;">controls</span><span style="color: red;">loop</span><span style="color: blue;">&gt;</span><br> Your browser does not support the video tag <span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span></p><p>&nbsp;</p><p>使用MIME指定视频的编码格式</p><p>&lt;!-- H.<span style="color: navy;">264</span> Constrained baseline profile video (main and extended video compatible)level <span style="color: navy;">3</span> and Low-Complexity AAC audio <span style="color: blue;">in</span> MP4 container --&gt;</p><p>&lt;source src=<span style="color: purple;">'video.mp4'</span> type=<span style="color: purple;">'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'</span>&gt;</p><p>&lt;!-- H.<span style="color: navy;">264</span> Extended profile video (baseline-compatible) level<span style="color: navy;">3</span> and Low-Complexity AAC audio<span style="color: blue;">in</span> MP4 container --&gt;</p><p>&lt;source src=<span style="color: purple;">'video.mp4'</span> type=<span style="color: purple;">'video/mp4; codecs="avc1.58A01E, mp4a.40.2"'</span>&gt;</p><p>&nbsp;</p><p>也可使用JavaScript来设定这些属性<span style="color: blue;">&lt;!—</span><span style="color: green;">显示控制栏的三种方式</span><span style="color: blue;">--&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">controls</span><span style="color: blue;">&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">controls</span><span style="color: blue;">=""&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">controls</span><span style="color: blue;">="controls"&gt;</span></p><p>// JavaScript中显示控制栏的两种方式</p><p>video.controls = true;</p><p>video.setAttribut('controls', 'controls');</p><p>如果无法确定目标浏览器是否能支持&lt;video&gt;或者你的视频格式 最好指定一个回退的信息 以告诉用户为什么没有到期望的内容<span style="color: blue;"><br>&lt;</span><span style="color: maroon;">video</span><span style="color: red;">controls</span><span style="color: blue;">&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">source</span><span style="color: red;">src</span><span style="color: blue;">="video1.mp4"</span><span style="color: blue;">/&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">source</span><span style="color: red;">src</span><span style="color: blue;">="video1.ogv"</span><span style="color: blue;">/&gt;</span> <span style="color: blue;">&lt;</span><span style="color: maroon;">source</span><span style="color: red;">src</span><span style="color: blue;">="video1.webm"</span><span style="color: blue;">/&gt;</span>&nbsp; <span style="color: blue;">&lt;</span><span style="color: maroon;">p</span><span style="color: blue;">&gt;</span>This browser does not support HTML5 video<span style="color: blue;">&lt;/</span><span style="color: maroon;">p</span><span style="color: blue;">&gt;</span> <span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span></p><p><br>如果你要确保视频可以被播放&nbsp; 可以按照以前的方式加入一个flash的object标签 <br></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">video</span><span style="color: red;">controls</span><span style="color: blue;">&gt;<br>&lt;</span><span style="color: maroon;">source</span><span style="color: red;">src</span><span style="color: blue;">="video1.mp4"</span><span style="color: blue;">/&gt;<br></span><span style="color: blue;">&lt;</span><span style="color: maroon;">source</span><span style="color: red;">src</span><span style="color: blue;">="video1.ogv"</span><span style="color: blue;">/&gt;</span><span style="color: blue;"></span><span style="color: maroon;"><br>&lt;source</span><span style="color: red;">src</span><span style="color: blue;">="video1.webm"</span><span style="color: blue;">/&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">object</span><span style="color: red;">data</span><span style="color: blue;">="videoplayer.swf"&gt;</span><span style="color: blue;">&lt;</span><span style="color: maroon;">param</span><span style="color: red;">name</span><span style="color: blue;">="flashvars"</span><span style="color: red;">value</span><span style="color: blue;">="video1.mp4"&gt;</span> 您的浏览器对HTML5 Video&nbsp;和&nbsp;Flash 都不支持 <span style="color: blue;">&lt;/</span><span style="color: maroon;">object</span><span style="color: blue;">&gt;</span> <span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span></p><p>&nbsp;</p><p>也可以在JavaScript中使用canPlayType来检测浏览器是否可以播放某个格式的视频</p><p><span style="color: blue;">var</span> video = document.getElementsByTagName(<span style="color: purple;">'video'</span>)[<span style="color: navy;">0</span>];</p><p>&nbsp;<span style="color: blue;">if</span> (video.canPlayType) { <span style="color: green;">//</span><span style="color: green;">支持</span><span style="color: green;">video</span><span style="color: green;">标签</span></p><p><span style="color: navy;">&nbsp;</span> <span style="color: blue;">if</span> (video.canPlayType(<span style="color: purple;">'video/ogg; codecs="theora, vorbis"'</span>)) { <span style="color: green;">// it may be able to play</span></p><p><span style="color: green;">&nbsp;</span> }&nbsp; <span style="color: blue;">else</span> &nbsp; {<span style="color: green;">// the codecs or container are not supported</span></p><p><span style="color: navy;">&nbsp;</span> fallback(video);</p><p><span style="color: navy;">&nbsp;</span>&nbsp;&nbsp; }</p><p><span style="color: navy;">&nbsp;</span>&nbsp; } <br></p><p>如果希望有更明确清晰的提示 可以使用onerror事件监听器来报告一个错误</p><p>&lt;video src=<span style="color: purple;">"video.mp4"</span> onerror=<span style="color: purple;">"fallback(this)"</span>&gt;不支持&lt;video&gt;<span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span></p><p>使用poster 可以在video播放区域显示一张图片来替代 它可以用来显示视频的预览图 </p><p>&lt;video src=<span style="color: purple;">"video1.mp4"</span> poster=<span style="color: purple;">"preview.jpg"</span><span style="color: blue;">&lt;/</span><span style="color: maroon;">video</span><span style="color: blue;">&gt;</span> <br></p><p>使用JavaScript和HTML 可以创建一个交互性的视频播放器 <strong>Figure 4</strong> 展示如何使用JavaScript添加一个video并响应用户的控制操作.(<strong>译注</strong>:比如Youtue就是采用动态创建video控件的方式来提供视频播放功能的&nbsp; <strong><span style="font-size: 12px;"><span style="color: rgb(255, 153, 0);"></span><span style="color: rgb(255, 153, 0);"></span></span></strong></p><p>&nbsp;<span style="color: blue;">var</span> video = <span style="color: blue;">new</span> Video(<span style="color: purple;">'video1.mp4'</span>)</p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">input</span><span style="color: red;">type</span><span style="color: blue;">="button"</span><span style="color: red;">value</span><span style="color: blue;">="Play"</span><span style="color: red;">onclick</span><span style="color: blue;">="video.play()"&gt;</span></p><p><span style="color: blue;">&lt;</span><span style="color: maroon;">input</span><span style="color: red;">type</span><span style="color: blue;">="button"</span><span style="color: red;">value</span><span style="color: blue;">="Pause"</span><span style="color: red;">onclick</span><span style="color: blue;">="video.pause()"&gt;</span></p>

312HTML5Web存储

<p><a href="/w3cnote/localstorage.html" target="_blank">localstorage封装</a> 有帮助 <br></p>

304HTML5WebSocket

说到 websocket 我觉得有必要说下跟 socket 的区别。

软件通信有七层结构,下三层结构偏向与数据通信,上三层更偏向于数据处理,中间的传输层则是连接上三层与下三层之间的桥梁,每一层都做不同的工作,上层协议依赖与下层协议。基于这个通信结构的概念。

Socket 其实并不是一个协议,是应用层与 TCP/IP 协议族通信的中间软件抽象层,它是一组接口。当两台主机通信时,让 Socket 去组织数据,以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议,IP 协议的连接则依赖于链路层等更低层次。

WebSocket 则是一个典型的应用层协议。

总的来说:Socket 是传输控制层协议,WebSocket 是应用层协议。

303HTML5WebSocket

Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。如:

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口,可以绕过大多数防火墙的限制。默认情况下,Websocket 协议使用 80 端口;运行在 TLS 之上时,默认使用 443 端口。

一个典型的Websocket握手请求如下:

客户端请求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
  • Connection 必须设置 Upgrade,表示客户端希望连接升级。
  • Upgrade 字段必须设置 Websocket,表示希望升级到 Websocket 协议。
  • Sec-WebSocket-Key 是随机的字符串,服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”,然后计算 SHA-1 摘要,之后进行 BASE-64 编码,将结果做为 “Sec-WebSocket-Accept” 头的值,返回给客户端。如此操作,可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13,之前草案的版本均应当弃用。
  • Origin 字段是可选的,通常用来表示在浏览器中发起此 Websocket 连接所在的页面,类似于 Referer。但是,与 Referer 不同的是,Origin 只包含了协议和主机名称。
  • 其他一些定义在 HTTP 协议中的字段,如 Cookie 等,也可以在 Websocket 中使用。

在服务器方面,网上都有不同对websocket支持的服务器: