美文网首页
html5小知识

html5小知识

作者: 形象代言人 | 来源:发表于2017-11-28 13:16 被阅读0次

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


    一文件拖拽

        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小知识

          本文链接:https://www.haomeiwen.com/subject/qcxjbxtx.html