美文网首页
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小知识

  • html5 小知识

    1.设置webstorm 输入内容超出屏幕后换行 分割线 换行 2.base标签:专门用来统一的指定当前的网页中...

  • html5小知识

    许多事情,大抵如此,当你拥有的时候不知道它的弥足珍贵,而当你失去了过后却又总是怀念不已。花有重开日,人无再少年。为...

  • 2018-03-26

    HTML5 今天主要学习HTML5,了解前端知识。 HTML5:HyperText Markup Language...

  • iOS-html

    一 、HTML5基础知识介绍 1.1 什么是HTML5? 2014年完成HTML5标准的制定,历时8年 移动先行 ...

  • html5小知识点

    知识因为被分享,才会更有意义 1.css选择器的优先级: 1. !important>行间样式>ID选择器>属性选...

  • html5 form表单小知识

    表单可以从前端发送数据给后端,如果需要后端识别的话,至少要有两个属性值,一个是数据名,一个是数据值,注释如下: <...

  • 回顾上周学习的HTML5

    前言 工作一周,差不多的又忘了,在学习新知识之前,回顾一下上周末学习的HTML5知识. 1, 什么是HTML5 ?...

  • HTML5权威指南 | 第二部分 HTML篇

    六、HTML5元素的背景知识 搞懂如何使用这些HTML5元素,和理解这些元素的含义同等重要。HTML5中的一大主要...

  • HTMl5-01

    ## HTML5****基础知识介绍 什么是HTML52014年完成的HTML5标准制定,历时8年,移动先行 为什...

网友评论

      本文标题:html5小知识

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