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




    JOE
    

    




    

请把图片拖入到矩形中


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

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

你可能感兴趣的:(HTML5新特性以及video和audio标签和拖放笔记)