一、video標(biāo)簽
- 實(shí)現(xiàn)
video支持媒體播放視頻功能，兼容性IE9以上院水，IE9支持部分MP4功能蕊唐。
<video width="400" height="300" controls="controls" autoplay="autoplay" loop="loop" >
<source url="test.mp4" type="video/mp4" >
你的瀏覽器不支持video標(biāo)簽 //當(dāng)瀏覽器不支持時(shí)顯示的文字
</video>
效果如圖：
video_show.png
-
屬性：
video屬性.png - 方法：
video方法.png
實(shí)現(xiàn)代碼如下：
<video id="video" width="400" height="300" controls="controls" autoplay="autoplay" loop="loop">
<source src="test.mp4" type="video/mp4">您的電腦不支持video標(biāo)簽</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標(biāo)簽
1.實(shí)現(xiàn)
<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標(biāo)簽.png
三、拖拽
1.實(shí)現(xiàn)
<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>
- 首先設(shè)置元素為可拖拽
 - 然后執(zhí)行拖拽方法
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}//將拖拽目標(biāo)保存到event.dataTransfer中
- 將拖拽目標(biāo)拖拽到容器中
<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();//不設(shè)置為代表不允許放在容器中
}
