一、video标签
- 实现
video支持媒体播放视频功能，兼容性IE9以上，IE9支持部分MP4功能。
<video width="400" height="300" controls="controls" autoplay="autoplay" loop="loop" >
<source url="test.mp4" type="video/mp4" >
你的浏览器不支持video标签 //当浏览器不支持时显示的文字
</video>
效果如图：
video_show.png
-
属性：
video属性.png
- 方法：
video方法.png
实现代码如下：
<video id="video" width="400" height="300" controls="controls" autoplay="autoplay" loop="loop">
<source src="test.mp4" type="video/mp4">您的电脑不支持video标签</video>
<script type="text/javascript">
var video = document.getElementById("video");
function play(argument) {
if(video.paused){
video.play();
}else{
video.pause();
}
}
function makeBig(){
video.width = 560;
}
function makeMiddle(){
video.width = 400;
}
function makeSmall(){
video.width = 300;
}
</script>
二、audio标签
1.实现
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
2.属性
audio标签.png
三、拖拽
1.实现
<body>
<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<script type="text/javascript">
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event){
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function allowDrop(event){
event.preventDefault();
}
</script>
</body>
- 首先设置元素为可拖拽
 - 然后执行拖拽方法
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}//将拖拽目标保存到event.dataTransfer中
- 将拖拽目标拖拽到容器中
<div class="div" ondrop="drop(event)" >
function drop(event){
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
- 是否允许拖拽放在容器中
<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
function allowDrop(event){
event.preventDefault();//不设置为代表不允许放在容器中
}
网友评论