HTML5是下一代的HTML，提供了展示视频的标准，规定了一种通过video元素来包含视频的标准方法。
Video有以下的属性。
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用"autoplay"，则忽略该属性。
src url 要播放的视频的URL。
width pixels 设置视频播放器的宽度。
HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。 //简单实例 用html5 拍摄照片 平在照片上实时标注GPS 并上传到服务器 存入数据库//需要 gumwrapper.min.js 支持
function opencam(){
//alert ("opencam")
if (cam_is_open==0){
var video_html='<video id="myVideo" width="320" height="240" ></video>'
$("#web_cam").html(video_html)//动态加入一个video元素
$("#web_cam").show()
function showSuccess(video) {
// alert('Hey, it works! Dimensions: ' + video.videoWidth + ' x ' + video.videoHeight)
}
function showError(error) {
alert('Oops: ' + error.message)
}
gum = new GumWrapper({video: 'myVideo'}, showSuccess, showError)
gum.play()
cam_is_open=1
$("#opencam_btn").attr("value","关闭镜头")
}else{
location.reload()
}
}
function short_cam(){
$("#photo_div").show()
$("#msg_tips").text("正在生成图片")
var now = new Date()
var cur_time=(now.getHours()<10?"0":"")+now.getHours()+":"
cur_time+=(now.getMinutes()<10?"0":"")+now.getMinutes()+":"
cur_time+=(now.getSeconds()<10?"0":"")+now.getSeconds()
send_time=now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate()
send_time+=" "+cur_time
send_lon=$("#cur_lon").text()
send_lat=$("#cur_lat").text()
var video_cam=document.getElementById("myVideo")
var canvasobj=document.getElementById("photo_canvas")
var ct1=canvasobj.getContext('2d')
ct1.fillStyle="#ffffff"
ct1.fillRect(0,0,640,480)
ct1.drawImage(video_cam,0,0)
ct1.font="25px Georgia"
ct1.fillStyle="#ff4444"
ct1.fillText(send_time,10,50)
ct1.fillText("纬度："+ send_lat,10,80)
ct1.fillText("经度："+ send_lon,10,110)
var img_data=canvasobj.toDataURL("mage/png")
var imgobj=document.getElementById("cur_img")
imgobj.src=img_data
$("#web_cam").hide()
$("#msg_tips").text("生成图片完成")
}
function reshort_photo(){
$("#photo_div").hide()
$("#web_cam").show()
}
function send_photo() {
$("#msg_tips").text("图片上传中")
var imgobj=document.getElementById("cur_img").src
//alert (imgobj)
$.ajax({
type:"post",
url:"updategpsp.php",
async:true,
dataType:"text",
data:{img_data:imgobj,send_time:send_time,
rel_lat:rel_lat,rel_lon:rel_lon,
send_lat:send_lat,send_lon:send_lon},
success: function(msg){
if (msg>=1){
$("#msg_tips").text("图片上传完毕")
alert("上传数据成功")
reshort_photo()
}else{
alert("上传数据失败！ 请重新传送")
alert(msg)
}
}
})
}
html文件
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>webcap Test</title>
<style>
body, html,#main_div{width: 100%height: 100%overflow: hiddenmargin:0}
#float_div{position: absolutetop: 5px left:25px border-right: activeborder 1px solid
border-top: activeborder 1px solid border-left: activeborder 1px solid
border-bottom: activeborder 1px solid z-index:9999,width: 300pxheight: auto
overflow: hidden}
#web_cam{width:320px height:240px }
#ctrl_bar_div{width:auto height:auto
border:1px dotted blue margin:0px
padding:3px}
.span1{background-color:#afa }
#cur_img{width:320px height:240px}
#msg_tips{color:redbackground-color:#afa}
#allmap {width: autoheight: 100%overflow: hiddenmargin:0font-family:"微软雅黑"}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="./js/gumwrapper.min.js"></script>
<script src="../js/Float_math.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的授权码"></script>
<script src="./js/testhtml5.js"></script>
<script type="text/javascript" >
var gps_star=0
var lat_offset=1.0001390158
var lon_offset=1.0001029614
var bm
var old_Position
var cur_marker
var prive_position
var cam_is_open=0 //记录镜头的打开状态 ， 默认为没有开 状态=0
var gum
var send_time=""
var send_lat=""
var send_lon=""
var rel_lat=""
var rel_lon=""
var cur_offset_zt=0
//alert (cur_marker)
$(document).ready(function() {
drawbaiduMap()
bm.centerAndZoom("东莞",18)
})
</script>
</head>
<body>
<div id="main_div">
<div id="allmap"></div>
</div>
<div id="float_div">
<div id="ctrl_bar_div">
<span class="span1" > 纬度：</span>
<span class="span1" id="cur_lat" >000.000000 </span>
<span class="span1" > 经度：</span>
<span class="span1" id="cur_lon" >000.000000 </span>
<input id="is_ver_off_set" type="button" onclick="ver_offset_zt()" value="校正" />
<br>
<input id="gps_btn" type="button" value="开\关GPS" onclick="getLocation()"/>
<input id="opencam_btn" type="button" value="打开镜头" onclick="opencam()"/>
<span id="msg_tips">GPS状态：关闭<span>
</div>
<div id="web_cam" style="display:none" onclick="set_timeout_short()" >
</div>
<div id="photo_div" style="display:none">
<div id="send_btn_div">
<input id="res_hort_btn" type="button" value="重拍" onclick="reshort_photo()"/>
<input id="send_photo_btn" type="button" value="发送" onclick="send_photo()"/>
<input id="canc_btn" type="button" value="取消" onclick="can_photo()"/>
</div>
<div id="canvas_div" style="display:none">
<canvas id="photo_canvas" width="640" height="480" >
"不支持"
</canvas>
</div>
<div id="img_div">
<img id="cur_img"/>
</div>
</div>
</div>
</body>
</html>
