html5小知识

许多事情,大抵如此,当你拥有的时候不知道它的弥足珍贵,而当你失去了过后却又总是怀念不已。花有重开日,人无再少年。为人者一世,颇为短暂,能迎来今日,当万分知足。过日子也是一样,当以平常心生情味,珍惜幸福,莫负今朝。


html5小知识_第1张图片

一文件拖拽

    ondragover          拖在上面
    ondragenter             拖进去
    ondragleave             拖出来
    ondrop          鼠标释放事件
    如果想让ondrop触发,必须阻止ondragover的默认行为
(1)获取文件信息
oEle.ondrop = function(ev){
    ev.dataTransfer.files       所有拖拽文件列表
    var oFile = ev.dataTransfer.files[0];
};
(2)文件信息
    oFile.name      名字
    oFile.size      大小
    oFile.type      类型
    (a)oFile.type
        MIME-Type
        主类型/子类型
        text  / plain
        image / jpeg
        image / gif
        video / avi
        video / mp4
        audio / mp3
        audio / ogg
文件内容
借助文件读取对象
var reader = new FileReader()
reader.readAsText(oFile)    通过文本读取
reader.readAsDataURL(oFile) 通过Base64读取
进度更改触发
reader.onprogress = function(ev){
    ev.loaded       以加载
    ev.total        总数
};

二、操作视频音频

(1)视频
video标签
    视频格式
        mp4         各种浏览器都兼容
        ogg
        avi
        webb
    属性
        controls    控制台
        autoplay    自动播放
        loop        环路播放
(2)音频
audio标签
    音频格式
        mp3         各种浏览器都兼容
        ogg
video   
    方法
        play()          播放
        pause()         暂停
    属性
        currentTime     当前播放时间
html5小知识_第2张图片

你可能感兴趣的:(html5小知识)