集成html5播放器 对象存储

HTML 5 视频
video标签
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
使用方法：<video src="movie.ogg" controls="controls"></video>
control 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<video> 标签的属性：
autoplay   值：autoplay      如果出现该属性，则视频在就绪后马上播放。
controls    值：controls      如果出现该属性，则向用户显示控件，比如播放按钮。
height          设置视频播放器的高度。
loop          值：loop           如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload    值：preload      如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src           要播放的视频的 URL。
width        设置视频播放器的宽度。
 
HTML 5 音频
 
audio标签
audio 元素能够播放声音文件或者音频流。
当前，audio 元素支持三种音频格式：
Ogg Vorbis，MP3，Wav。
使用方法：<audio src="song.ogg" controls="controls"></audio>
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
例：<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件
例：
<audio controls="controls"> 
 <source src="song.ogg" type="audio/ogg"> 
 <source src="song.mp3" type="audio/mpeg">
 Your browser does not support the audio tag.
</audio>
属性：
autoplay   值：autoplay    如果出现该属性，则音频在就绪后马上播放。
controls    值：controls     如果出现该属性，则向用户显示控件，比如播放按钮。
loop          值：loop           如果出现该属性，则每当音频结束时重新开始播放。
preload    值：preload      如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src     要播放的音频的 URL。
 
HTML 5 拖放
 
首先，为了使元素可拖动，把 draggable 属性设置为 true：
<img draggable="true" />
然后，规定当元素被拖动时，会发生什么。
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
进行放置 - ondrop
 
HTML 5 画布
 
canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素：
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
使用您指定的颜色来绘制渐变背景：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
把一幅图像放置到画布上：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="flower.png";
cxt.drawImage(img,0,0);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
 
HTML5 内联 SVG
 
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 图像可通过文本编辑器来创建和修改
 
把 SVG 直接嵌入 HTML 页面
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  
<polygon points="100,10 40,180 190,60 10,60 160,180"  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
 
画布
• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用
在客户端存储数据
 
HTML5 提供了两种在客户端存储数据的新方法：
• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子对用户访问页面的次数进行计数：
<script type="text/javascript">
if (localStorage.pagecount) {
  localStorage.pagecount=Number(localStorage.pagecount) +1; 
 }else  { 
 localStorage.pagecount=1;  
}document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子对用户在当前 session 中访问页面的次数进行计数：
<script type="text/javascript">
if (sessionStorage.pagecount)  { 
 sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; 
 }else  {  
sessionStorage.pagecount=1;  
}document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
HTML 5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
例：
<!DOCTYPE html>
 <html manifest="/example/html5/demo_html.appcache">
 <body>
 <script type="text/javascript" src="/example/html5/demo_time.js">
 </script>
 <p id="timePara"><button οnclick="getDateTime()">获得日期和事件</button></p>
 <p><img src="/i/w3school_banner.gif" /></p>
 <p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
 </body>
 </html>
 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性；每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
HTML 5 Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
下面的例子创建了一个简单的 web worker，在后台计数：
<!DOCTYPE html>
 <html>
 <body><p>计数: <output id="result"></output></p>
 <button οnclick="startWorker()">开始 Worker</button> 
 <button οnclick="stopWorker()">停止 Worker</button>
 <br /><br /><script>
 var w;function startWorker()
 {
 if(typeof(Worker)!=="undefined")
   {
   if(typeof(w)=="undefined")
   {
   w=new Worker("/example/html5/demo_workers.js");
   }
   w.onmessage = function (event) {
     document.getElementById("result").innerHTML=event.data;
     };
   }
 else
   {
   document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
   }
 }function stopWorker()
 { 
 w.terminate();
 }
 </script></body>
 </html>检测 Web Worker 支持
在创建 web worker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined")  {
  // Yes! Web worker support!  // Some code..... 
 }else  { 
 // Sorry! No Web Worker support..
  }
创建 web worker 文件
var i=0;
function timedCount(){
i=i+1;postMessage(i);
setTimeout("timedCount()",500);}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。