您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
html5中video与拖拽的使用
发布时间：2015-05-16 07:35:03编辑：雪饮阅读（）
源码如下：
<!doctype html>
<html>
<head>
<meta charset="gb18030">
<title>Untitled Document</title>
<style type="text/css">
#div1{
width:1000px;
height:800px;
margin:0 auto;
border:1px solid pink;
resize:none;
}
#xianjian{
width:900px;
height:350px;
margin:0 auto;
border:1px solid red;
resize:none;
}
</style>
</head>
<body>
<div style="text-align:center;"id="xianjian" ondrop="drop(event)" ondragover="allowDrop(event)" >
<button onClick="playPause()">播放/暂停</button>
<button onClick="makeBig()">大</button>
<button onClick="makeNormal()">中</button>
<button onClick="makeSmall()">小</button>
<br/>
<!--被拖放的元素需要draggable="true"-->
<video id="video1" width="320px" height="240px" style="margin-top:15px;resize:none;" draggable="true" ondragstart="drag(event)">
<source src="《仙剑5前传》第二部宣传片_高清.mp4" type="video/mp4" />
你的浏览器不支持html5的video标签
</video>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<script type="text/javascript">
var myvideo=document.getElementById("video1");
function playPause(){
if(myvideo.paused){
myvideo.play();
}
else{
myvideo.pause();
}
}
function makeBig(){
myvideo.width=800;
myvideo.height=600;
}
function makeNormal(){
myvideo.width=640;
myvideo.height=320;
}
function makeSmall(){
myvideo.width=320;
myvideo.height=240;
}
//下面开始是拖拽事件的一系列方法
function allowDrop(ev)
{
ev.preventDefault();//取消拖拽过程中的默认事件
}
function drag(ev){
//被拖拽时转移数据的方法
ev.dataTransfer.setData("biaoshi",ev.target.id);
}
function drop(ev){
//放置方法
ev.preventDefault();//取消放置方法的默认事件
var data=ev.dataTransfer.getData("biaoshi");//获取被转移节点信息
ev.target.appendChild(document.getElementById(data));//创建子节点
}
</script>
</body>
</html>
<button onClick="makeSmall()">小</button>
<br/>
<!--被拖放的元素需要draggable="true"-->
<video id="video1" width="320px" height="240px" style="margin-top:15px;resize:none;" draggable="true" ondragstart="drag(event)">
<source src="《仙剑5前传》第二部宣传片_高清.mp4" type="video/mp4" />
雪饮个人博客提醒你，你的浏览器不支持html5的video标签
</video>
</div>
标签要被拖拽，那么就需要两个目标，一个是被拖拽的目标，另外是拖拽至那个目标。首先被拖拽的元素需要定义一个属性和一个事件。
draggable="true" ondragstart="drag(event)"拖拽功能的开启，以及开始拖拽时需要获取被拖拽的数据
function drag(ev){
//被拖拽时转移数据的方法
ev.dataTransfer.setData("biaoshi",ev.target.id);
}
该方法将被拖拽数据设置标识给拖拽至的那个目标来接收
接收拖拽来的数据的标签也需要两个方法来接收：
ondrop="drop(event)" ondragover="allowDrop(event)"当拖拽至目标标签上（还在拖拽状态，没有丢进去时）需要先取消拖拽过程的默认事件；后者要放置时先取消掉放置的默认方法，然后获取之前设定好的标识，在当前标签中新增子节点为被拖拽而来的标签。
video标签可以引入html5当前支持的视频格式，source标签用作引入资源。通过type="video/mp4"来定义类型格式。
video标签默认可以设置视频宽高比例，以被引入视频进行拉伸或者，当然要设置宽高属性，否则将保持原比例。
在video标签中可以设置controls="controls"属性，该属性可以在网页中将该视频以默认的视频控件加载。
既然有这样的控件，那么我们就可以通过js来自定义控件。
function playPause(){
if(myvideo.paused){
myvideo.play();
}
else{
myvideo.pause();
}
}
该方法在视频播放时暂停，在视频暂停时播放。
function makeBig(){
myvideo.width=800;
myvideo.height=600;
}
function makeNormal(){
myvideo.width=640;
myvideo.height=320;
}
function makeSmall(){
myvideo.width=320;
myvideo.height=240;
}
这三个视频可以使得视频的宽高比例得以控制。
源代码预览效果如下：
关键字词：video,拖拽,个人博客
上一篇：html5中标签的改变（2）
下一篇：HTML5音视频介绍