html5

html

2014-07-09 09:16

视频播放

<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">

  <source src="mov_bbb.ogg" type="video/ogg">   视频地址1

  <source src="mov_bbb.MP4" type="video/mp4">   视频地址2

不支持显示提示.

</video>


autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels 设置视频播放器的高度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。  外部链接地址或者网站内部地址.

width  设置视频播放器的宽度。


方法   播放play()  暂停pause() 载入load() 

属性   currentSrc     currentTime   paused

------------------------------------------------------------------------------------------------------

音频标签

<audio controls="controls">

  <source src="mov_bbb.ogg" type="audio/ogg">

  <source src="mov_bbb.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

属性方法和视频一样。。

-------------------------------------------------------------------------------------------------

画图标签

<canvas id="myCanvas" width="200" height="300"   style="border: #0F0 1px solid"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF2000";

cxt.fillRect(10,30,150,75);

</script>

主要是通过js完成操作。 比较复杂。

------------------------------------------------------------------------------------------------

获取地理位置

<script>

function getLocation()

  {

  if (navigator.geolocation)   //是否支持该命令

    {

    navigator.geolocation.getCurrentPosition(showPosition,showError); //参数1 正确执行函数名称，参数2 失败执行函数名称

    }

  else{x.innerHTML="这个浏览器不支持地理定位。";}

  }


function showPosition(position)

  {

  var latlon=position.coords.latitude+","+position.coords.longitude;

  }


function showError(error)

  {

  switch(error.code) 

    {

    case error.PERMISSION_DENIED:

      x.innerHTML="地理位置的用户拒绝请求。"

      break;

    case error.POSITION_UNAVAILABLE:

      x.innerHTML="位置信息是不可用的。"

      break;

    case error.TIMEOUT:

      x.innerHTML="超时请求获取用户位置。"

      break;

    case error.UNKNOWN_ERROR:

      x.innerHTML="一个未知的错误发生。"

      break;

    }

  }

</script>

coords.latitude 十进制数的纬度

coords.longitude 十进制数的经度

coords.accuracy 位置精度

coords.altitude 海拔，海平面以上以米计

coords.altitudeAccuracy 位置的海拔精度

coords.heading 方向，从正北开始以度计

coords.speed 速度，以米/每秒计

timestamp 响应的日期/时间


Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

----------------------------------------------------------------------------------------------

本地存储

永久存储 localStorage

<script type="text/javascript">
localStorage.变量名="Smith";
document.write(localStorage.变量名);
</script>

临时存储   sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
<script type="text/javascript">
sessionStorage.变量名="Smith";document.write(sessionStorage.变量名);</script>

------------------------------------------------------------------------------------------------------------

应用程序缓存 

<html manifest="demo.appcache">

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。


更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存


实例 - 完整的 Manifest 文件

CACHE MANIFEST       //在此标题下列出的文件将在首次下载后进行缓存

/theme.css

/logo.gif

/main.js

NETWORK:          //在此标题下列出的文件需要与服务器的连接，且不会被缓存

login.asp

FALLBACK:           // 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

/html5/ /404.html

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

----------------------------------------------------------------------------------

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

-------------------------------------------------------------------------------------------

HTML 5 服务器发送事件


<div id="result"></div>

<script>

if(typeof(EventSource)!=="undefined")  //判断是否支持

  {

  var source=new EventSource("a.php");  //发送页面设置

  source.onmessage=function(event)   //绑定事件

    {

    document.getElementById("result").innerHTML+=event.data + "<br />";   //返回值

    };

  }

else

  {

        //对不起,您的浏览器不支持server-sent事件……

  }

</script>


php 

<?php

header('Content-Type: text/event-stream');  //必须是指定这个

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}".date("Y-n-j G:i:s")."\n\n";   //返回值 必须是data: xxxx

flush();

?>

3个事件

onopen 当通往服务器的连接被打开

onmessage 当接收到消息

onerror 当错误发生

----------------------------------------------------------------------------------------------

mail: <input type="email" name="email" /><br>

url: <input type="url" name="url" /><br>

number: <input type="number" name="number" /><br> max 最大 min 最小 step  step="3"合法的数是 -3,0,3,6  value 默认

range: <input type="range" name="range" /><br>  max 最大 min 最小 step  step="3"合法的数是 -3,0,3,6  value 默认

Date: <input type="Date" name="Date" /><br>    date，month，week，time，datetime，datetime-local

search: <input type="search" name="search" /><br>

search: <input type="color" name="color" /><br>


输入网址: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

--------------------------------------------------------------------------------------------------

属性

autofocus="autofocus"  自动获取焦点

autocomplete="on/off"  属性规定 form 或 input 域应该拥有自动完成功能。

novalidate="true"      表单或者input不验证
required="required"    属性规定必须在提交之前填写输入域（不能为空）。


入域所属的一个或多个表单。
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" /></form>
name: <input type="text" name="lname" form="user_form" />
注释：如需引用一个以上的表单，请使用空格分隔的列表。


Select images: <input type="file" name="img" multiple="multiple" />  multiple 属性规定输入域中可选择多个值。

<input type="search" name="user_search"  placeholder="Search W3School" />  描述输入域所期待的值。