html5
http://www.w3school.com.cn/html5/index.asp从这个网站开始一点点累积
初步了解:html5 是下一代的html
html5建立规则:
基于html,css,dom以及JavaSctipt
用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好支持
特殊内容元素:article,footer,header,nav,section
表单控件:calendar,date,time,email,Url,search
浏览器:safari,chrome,firefox以及orera
html5视频:
当前video支持三种视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 目前firefox 3.5+,Opera 10.5+,Chrome 5.0+ 支持该格式
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 目前IE9.0+,Chrome5.0+,Safari 3.0+支持该格式
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 目前Firefox 4.0+,Opera 10.6+,Chrome6.0+支持该格式
也就是说目前Chrome 6.0+以上版本对以上格式都是支持的,IE只支持MPEG4格式还是得需要9.0以上版本,与IE走相同支持路线的就是Safari在3.0以上版本也仅支持MPEG4
Firefox和Opera走的是相同路线,没有对MPEG4的支持,但是分别支持了Ogg格式和WebM格式
总结来说:
操作系统自带的浏览器支持的是MPEG 4
做搜索的巨头造的浏览器全面支持
第三方浏览器Firefox和Opera不支持MPEG 4
在html5 中显示视频非常简单只需在代码中添加:
<video src="/i/moive.ogg" controls="controls"></video>
或者:
<video controls="controls">
<source src="/i/moive.ogg" type="video/ogg"/>
Your browser does not support the video tag.
</video>
上面的controls熟悉供添加播放,暂停和音量控件
<video>和</video>之间的内容是供不支持video元素的浏览器显示的
其次还可以制定video的宽度和高度:
<video width="320" height="240" controls="controls">
<source src="/i/moive.ogg" type="video/ogg"/>
Your browser does not support the video tag.
</video>
为了适配多个浏览器,可猜测在<video>和</video>做适配,浏览器将使用第一个可识别的格式:
<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结合DOM可以良好的对video进行控制,可以直接在<script>标签中使用var videotest = document.getElementById("video_name");
找到video控件后,可以使用其方法进行播放,暂停操作,如if(videotest.paused){videotest.paly()},就是通过属性判断可以使用其属性pause如果是暂停
状态的话,调用起play()方法进行播放。
对于audio的支持,html5 也提供了支持,也是支持三种格式:
Ogg Vorbis
MP3
Wav
对于三种的支持基本还是遵从视频的规律,唯一不同的就是Chrome3.0还不支持Wav而Safari却在3.0的时候对Wav格式进行了支持。这样一对比就相当好记了,但是真心
不晓得记这个有什么用尼? =_ =!(考试综合症)
html5播放音频和视频的代码也相似,只是标签改了一下下而已:
<audio src="song.ogg" controls="controls"></audio>
control属性还是用于添加播放、暂停和音量控件。
<audio></audio>控件直接内容还是供不支持audio元素的浏览器显示的辅助。标签之间同意允许多个source元素,source元素可以连接不同的音频文件,浏览器还是
使用第一个可识别的格式:
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="song.ogg" type="audio/ogg"/>
<source src="song.mp3" type="audio/mp3"/>
Your browser does not support the audio tag.
</audio>
HTML5 拖放
在HTML5 中拖放是标准的一部分,任何元素都能够拖放。
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
不用想必须是跟JavaScript结合完成的动作
首先为了使元素可以拖动,把draggable属性设置为true
<img id="drag1" draggable="true" />
拖动什么 ondragstart和setData()
<img id="drag1" draggable = "true" οndragstart="drag(event)" src="/i/img_logo.gif"/>
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
dataTransfer.setData()方法用来设置被拖放数据的类型和值
表示数据类型是"Text" 值是可拖动元素的id("drag1")
放到什么地方-ondragover
ondragover事件规定在何处放置被拖动的数据。
默认情况下,如法将数据、元素放置到其他元素中,如果需要设置允许方法,必须阻止对元素默认的处理方式。
通过对目标控件调用ondragover事件的event.preventDefault()方法:
event.preventDefault();
进行放置 - ondrop
放置被拖动数据时,该事件会在目标控件上发生,也就说要对目标控件设置ondrop属性
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"/>
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
调用preventDefault()来避免浏览器对数据的默认处理(drop事件的默认处理行为是以链接式打开)
通过dataTransfer.getData("Text")方法获得被拖动的数据,该方法将返回在setData()方法中设置为相同类型的任何数据
被拖数据是被拖元素的id("drag1")
把被拖元素追加到放置元素的目标中
综合上述,被拖动和要拖动到的元素应该在html中这样写:
被拖动元素:
<img id="img_drag" src="/i/img_logo.gif" draggable="true" οndragstart="drag(event)"/>
拖动到的目标元素:
<div id="div_dest" οndrοp="drop(event)" οndragοver="allowDrop(event)"/>
JavaScript这样写:
//被拖动时触发,用来设置要拖放的数据类型(文本类型)和值(控件的id)
<script type="text/javascript">
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//对目标元素的默认放置事件进行处理
function allowDrop(ev){
ev.preventDefault();
}
//放到目标位置的时候,将拖动的数据添加到目标位置
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
对数据的放置和获取使用的ev.dataTransfer.getData("Text") 获取数据,参数是数据的类型
ev.dataTransfer.setData("Text",ev.target.id);