html video拖放设置,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
#div1{
border: 1px solid #aaaaaa;
/*width: 20%;*/
height: 100px;
float: left;
padding: 60px;
}
#div2{
border: 1px solid #aaaaaa;
/*width: 20%;*/
height: 100px;
float: left;
margin-left: 40px;
padding: 60px;
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
请把图片拖入到矩形中
w3c对拖放的标注:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
html video拖放设置,HTML5新特性以及video和audio标签和拖放笔记相关推荐
- Html5新特性总览
Html5新特性总览 1.HTML5 新元素 标签 描述 < article> 定义页面独立的内容区域. < aside> 定义页面的侧边栏内容. < bdi> 定 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单 表单2 ...
- HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签 基于菜鸟教程的个人向学习笔记 菜鸟教程 文章目录 ...
- HTML5新特性归纳和同类比较
第一章 HTML5定义 什么是 HTML5? HTML5 是下一代HTML标准. HTML , HTML 4.01的上一个版本诞生于1999年.自从那以后,Web世界已经经历了巨变. HTML5 仍处 ...
- HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持 创建一个画布(Canvas) 使用 JavaScript 来绘制图像 画线.画圆.写字.渐变效果 ...
- 这一次,彻底搞懂HTML5新特性
前言 HTML5已经被提出多年,关于HTML5到底带来了哪些新特性?和之前的HTML版本有什么区别?这经常是面试官考到的题目,下面让我们来深刻的总结这个问题吧~ HTML新特性 1:语义化标签 通过语 ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- 利用HTML5新特性实现拖拽交换表格单元格元素
利用HTML5新特性实现拖拽交换表格单元格元素 HTML5新特性:拖放 拖放 拖放(Drag 和 Drop)是很常见的特性.它指的是您抓取某物并拖入不同的位置. 拖放是 HTML5 标准的组成部分:任 ...
- 【HTML5新特性】
HTML5新特性 一.语义标签 二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性 三.音频和视频 四.canvas 五.SVG 六.地理位置 七.拖放API 八.web Wor ...
最新文章
- Python3学习笔记-使用list和tuple
- jQuery学习笔记(Ajax)
- WARNING: at net/core/dev.c:1905 skb_warn_bad_offload+0x94/0xb4() 解决思路
- Nutanix:将IT基础架构“隐形”,让云更简单
- 怎么查到mysql的账号密码是什么_怎么查到mysql的账号密码是什么?
- asp.net+mysq 数据库操作类
- 游戏社交崛起!四缺一,开黑吗?
- 面试题—Mysql篇
- onload 事件、DOMContentLoaded事件、DOM加载顺序
- linux机顶盒怎么破解wifi,折腾一下数字电视的机顶盒
- Golang编程百例-Golang数字排列组合
- Mysql 杀死进程 | 解决Lock wait timeout exceeded
- Allegro中显示两种单位方法
- UEFI与MBR区别
- vue-cli中简洁版日历节假日设置功能
- layer.aler点击按钮回调方法
- 怎么用计算机上网,[图示教程]如何让电脑通过iPhone手机上网
- 用Python模拟登录学校教务系统抢课
- 教你一招Linux下文本比对方法
- ew通过socks5一层代理-访问内网二层网络-实战篇
热门文章
- python json库函数_Python JSON
- ee可以有js吗 jvaa_EE今年最后一次邀请,最低分数线468分!2021年的40万新移民指标,你准备好了吗?!...
- Bootstrap下拉菜单相关
- $(obj).each 和 $.each() 区别
- ExtJs4 学习一
- NSRunLoop中Autorelease pool 管理
- SQL NOTE--VIEW
- 【Linux】ubuntu 16 启动拨号上网
- google protobuf Linux环境下的安装与使用
- 解决:无法添加符号: DSO missing from command line