HTML 5 从基础开始学习之一 video audio 拖动


html5

http://www.w3school.com.cn/html5/index.asp从这个网站开始一点点累积

初步了解:html5 是下一代的html

html5建立规则:

基于html,css,dom以及JavaSctipt

用于绘画的canvas元素

用于媒介回放的video和audio元素

对本地离线存储的更好支持

特殊内容元素:article,footer,header,nav,section

表单控件:calendar,date,time,email,Url,search

 

浏览器:safari,chrome,firefox以及orera

 

html5视频:

当前video支持三种视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件  目前firefox 3.5+,Opera 10.5+,Chrome 5.0+ 支持该格式

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 目前IE9.0+,Chrome5.0+,Safari 3.0+支持该格式

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件   目前Firefox 4.0+,Opera 10.6+,Chrome6.0+支持该格式

也就是说目前Chrome 6.0+以上版本对以上格式都是支持的,IE只支持MPEG4格式还是得需要9.0以上版本,与IE走相同支持路线的就是Safari在3.0以上版本也仅支持MPEG4

Firefox和Opera走的是相同路线,没有对MPEG4的支持,但是分别支持了Ogg格式和WebM格式

总结来说:

 操作系统自带的浏览器支持的是MPEG 4

 做搜索的巨头造的浏览器全面支持

 第三方浏览器Firefox和Opera不支持MPEG 4

 

在html5 中显示视频非常简单只需在代码中添加:

或者:

 

 Your browser does not support the video tag.

 

上面的controls熟悉供添加播放,暂停和音量控件

之间的内容是供不支持video元素的浏览器显示的

 

其次还可以制定video的宽度和高度:

 

 Your browser does not support the video tag.

 

为了适配多个浏览器,可猜测在做适配,浏览器将使用第一个可识别的格式:

 

 

Your browser does not support the video tag.

 

video结合DOM可以良好的对video进行控制,可以直接在

 

对数据的放置和获取使用的ev.dataTransfer.getData("Text") 获取数据,参数是数据的类型

                        ev.dataTransfer.setData("Text",ev.target.id);

转载于:https://my.oschina.net/zhibuji/blog/77095

你可能感兴趣的:(HTML 5 从基础开始学习之一 video audio 拖动)