HTML5新特性以及video和audio标签和拖放笔记

新特性

• 用于绘画的canvas元素
• 用于媒介回访的video和audio元素
• 对本地离线存储更好的支持
• 新的特殊内容元素 article footer header nav section
• 新的表单控件 calendar date time email url search

video标签

• src是视频源文件路径
• control提供了播放暂停的音量控件
• autoplay会自动播放preload会在页面加载时进行加载预备播放,若使用autoplay则会忽略该属性
• loop循环播放
• height和width分别是播放器的高和宽
• type可以指定视频的文件格式,例如:video/mp4,safari必须是mpeg4类型,ie8不支持video元素,ie9中也必须是mpeg4格式的视频
• 在中间的文本,类似img标签的alt属性,当浏览器不支持该标签的时候则会显示这些文字.

video-DOM

可以使用document.getElementById()来通过id获取标签,然后调用其方法.
w3c上调用了play()和pause()方法来控制播放和暂停,使用了paused属性判断播放器是否处于暂停状态,还使用了width和height属性来控制播放器窗口的宽高.
所以可以使用DOM来控制video属性.

audio

HTML5规定了audio元素来控制音频的播放.
audio元素类似video元素

拖放

HTML5中任何元素都能够拖放

为了使元素可以被拖放,首先需要设置其darggable属性为true,让元素支持拖放.
当元素被拖动时ondragstart属性会调用一个指定的方法,方法中通常传入拖动事件,然后通过事件的dataTransfer.setData()方法设置被拖动的数据类型和值.可以使用事件的target.id属性获取值.
使用ondragover属性将元素放到其他元素中,若需要设置允许放置e,必须阻止对元素的默认处理方式.通过调用ondragover事件的event.preventDefault()方法来实现.
使用ondrop进行放置
被拖动的元素需要设置id

    
    

    




    
请把图片拖入到矩形中
    

        
    
    

    

    

w3c对拖放的标注:
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中