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

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 中显示视频非常简单只需在代码中添加：

<video src="/i/moive.ogg" controls="controls"></video>

或者：

<video controls="controls">

  <source src="/i/moive.ogg" type="video/ogg"/>

 Your browser does not support the video tag.

</video>

 

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

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

 

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

<video width="320" height="240" controls="controls">

  <source src="/i/moive.ogg" type="video/ogg"/>

 Your browser does not support the video tag.

</video>

 

为了适配多个浏览器，可猜测在<video>和</video>做适配，浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls="controls">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

 

video结合DOM可以良好的对video进行控制，可以直接在<script>标签中使用var videotest = document.getElementById("video_name");

找到video控件后，可以使用其方法进行播放，暂停操作，如if(videotest.paused){videotest.paly()},就是通过属性判断可以使用其属性pause如果是暂停

状态的话，调用起play()方法进行播放。

 

对于audio的支持，html5 也提供了支持，也是支持三种格式：

Ogg Vorbis

MP3

Wav

对于三种的支持基本还是遵从视频的规律，唯一不同的就是Chrome3.0还不支持Wav而Safari却在3.0的时候对Wav格式进行了支持。这样一对比就相当好记了，但是真心

不晓得记这个有什么用尼？ =_ =!(考试综合症)

html5播放音频和视频的代码也相似，只是标签改了一下下而已：

<audio src="song.ogg" controls="controls"></audio>

control属性还是用于添加播放、暂停和音量控件。

<audio></audio>控件直接内容还是供不支持audio元素的浏览器显示的辅助。标签之间同意允许多个source元素，source元素可以连接不同的音频文件，浏览器还是

使用第一个可识别的格式：

<audio controls="controls" autoplay="autoplay" loop="loop">

<source src="song.ogg" type="audio/ogg"/>

<source src="song.mp3" type="audio/mp3"/>

Your browser does not support the audio tag.

</audio>

 

 

HTML5 拖放

在HTML5 中拖放是标准的一部分，任何元素都能够拖放。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

不用想必须是跟JavaScript结合完成的动作

 

首先为了使元素可以拖动，把draggable属性设置为true

<img id="drag1" draggable="true" />

 

拖动什么 ondragstart和setData（）

<img id="drag1" draggable = "true" ondragstart="drag(event)" src="/i/img_logo.gif"/>

function drag(ev){

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

}

dataTransfer.setData()方法用来设置被拖放数据的类型和值

表示数据类型是"Text" 值是可拖动元素的id("drag1")

 

放到什么地方-ondragover

ondragover事件规定在何处放置被拖动的数据。

默认情况下，如法将数据、元素放置到其他元素中，如果需要设置允许方法，必须阻止对元素默认的处理方式。

通过对目标控件调用ondragover事件的event.preventDefault()方法：

event.preventDefault();

 

进行放置 - ondrop

放置被拖动数据时，该事件会在目标控件上发生，也就说要对目标控件设置ondrop属性

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"/>

function drop(ev){

 ev.preventDefault();

 var data=ev.dataTransfer.getData("Text");

 ev.target.appendChild(document.getElementById(data));

}

 

调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认处理行为是以链接式打开）

通过dataTransfer.getData("Text")方法获得被拖动的数据，该方法将返回在setData（）方法中设置为相同类型的任何数据

被拖数据是被拖元素的id（"drag1"）

把被拖元素追加到放置元素的目标中

 

综合上述，被拖动和要拖动到的元素应该在html中这样写：

被拖动元素：

<img id="img_drag" src="/i/img_logo.gif" draggable="true" ondragstart="drag(event)"/>

拖动到的目标元素：

<div id="div_dest" ondrop="drop(event)" ondragover="allowDrop(event)"/>

 

JavaScript这样写：

//被拖动时触发，用来设置要拖放的数据类型（文本类型）和值（控件的id）

<script type="text/javascript">

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));

}

</script>

 

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

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

评论总数：0 条 [ 查看全部 ] 网友评论