一、video元素和audio元素

1、基础知识

video元素：

在HTML5中专门用来播放网络上的视频或者电影。

audio元素：

在HTML5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以了！

浏览器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！

使用方法：
audio元素只需要给他指定一个src属性：

<audio src="MP3.mp3" controls="controls"></audio>

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>

source元素指定多个播放格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：

<video><source src="video.m4v" type="video/mp4" /><source src="video.webm" type="video/webm" /><source src="video.ogv" type="video/ogg" /><source src="video.mp4" />
</video>

2、常用属性

src属性： 在这个属性里面指定媒体数据的URL地址。
controls属性： 指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。

使用方法：

<video src="video.mp4" controls="controls"></video>

width和height属性（video独有）：
指定视频的宽度与高度。
使用方法：

<video src="video.mp4" width="650" height="450"></video>

autoplay属性：
这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性：
这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。
preload属性的三个值：
none 表示不进行预加载。
metadata 表示只预加载媒体的元数据。
auto(默认值) 表示预加载全部的视频或者音频。
使用方法：

<video src="video.mp4" preload="auto" ></video>

poster属性（video独有）：
当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。
使用方法：

<video src="video.mp4" poster="video.jpg"></video>

loop属性：
指定是否循环播放视频或者音频数据。
使用方法：

<video src="video.mp4" autoplay="auto" loop="loop"></video>

error属性：
读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。
4种错误状态，返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/视频
读取错误状态示例

<video id="video" src="video.mp4"></video>
<script type="text/javascript">var video = document.getElementById('video');video.addEventListener("error",function(){var error = video.error;switch (error.code){case 1:alert('取回过程被用户中止。');break;case 2:alert('当下载时发生错误。');break;case 3:alert('当解码时发生错误。');break;case 4:alert('媒体不可用或者不支持音频/视频。');break;}},false);
</script>

networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
4种错误状态，表示音频/视频元素的当前网络状态：
0 = NETWORK_EMPTY - 音频/视频尚未初始化
1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）

二、html5的拖放

1、拖放的步骤

1）对象元素的draggable属性设置为true（draggable=“true”）。还需要注意的是a元素和img元素必须指定href。

2）编写与拖放有关的事件处理代码。事件产生事件的元素描述dragstart被拖放的元素开始拖放操作drag被拖放的元素拖放过程中dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素范围内移动dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围drop拖放的目标元素其他元素被拖放到了本元素中dragend拖放的对象元素拖放操作结束

2、DataTransfer对象的属性与方法

DataTransfer对象的属性和方法属性/方法描述dropEffect属性表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、moveeffectAllowed属性用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitializedtypes属性存入数据的种类，字符串的伪数组void clearData（DOMString format）方法清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。void steData（DOMString format，DOMStrong data）向DataTransfer对象中存入数据DOMString getData(DOMString format)从DataTransfer对象中读取数据void setDragImage(Element image，long x，long y)用img元素来设置拖放图标

clearData方法可以用于清除DataTransfer对象中的数据。

3、拖放的时的效果

设置拖放时的视觉效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：属性值说明copy允许被拖动的元素被复制到项目中move允许将被拖动元素移动到被拖动的目标元素中link通过拖放操作，被拖动的元素会连接到拖到的目标元素上copylink被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作copyMove被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作linkmove被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作all允许执行所有拖动操作none不允许执行任何拖动操作uninyialize不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。

三、css3基础

1、CSS3介绍

CSS3是CSS技术的升级版本，CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

2、属性选择器

CSS3中的属性选择器：
在CSS中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]

[att*=val]属性选择器

如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

[att^=val]属性选择器

如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值。

[att$=val]属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。

html5video与audio元素和css3基本属性相关推荐

CSS3 基本属性浅析（含选择器、背景阴影、3D转换、动画等）
1渐进增强原则 2私有前缀不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; ...
Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...
关于HTML5中的video和audio元素
<video>和<audio>元素是HTML5中新增的两个元素! Video:用于电影文件和其他视频流的播放. audio:用于音乐文件和其他音频流的播放. html: < ...
html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...
如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度 ...
用于播放视频的Html5元素是,HTML5多媒体播放video元素与audio元素详解
在HTML5问世之前,要在网络上展示视频.音频和动画,除了使用第三方自主开发的播放器外,使用得最多的工具应该是FLASH了,便它们都需要在浏览器中安装各种插件才能使用,而且有时速度很慢.HTML5的出 ...
JS获取音频的总时长，解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候,会发现有拿到duration是Infinity的情况,这时如果我们动态的展示录音时间时候就会有问题.首先明确一下这是chrom ...
button 元素的css3旋转动画
html: 利用伪元素 <button class="btn btn-default btn-lg btn-3d" type="submit" data- ...
css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画发布 ...
css设置元素抛物线,CSS3 抛物线波动（Parabola Wave）
CSS 语言: CSSSCSS 确定 body { background: #000; } .line { border: 1px solid #fff; margin: 7.5px auto 0; ...

html5video与audio元素和css3基本属性