Html5多媒体标签与拖拽

最新推荐文章于 2022-05-07 08:49:58 发布

没有风雨怎能远方

最新推荐文章于 2022-05-07 08:49:58 发布

阅读量717

点赞数

分类专栏： WEB前端文章标签： html5 多媒体拖拽

本文链接：https://blog.youkuaiyun.com/yyf0409/article/details/76147684

版权

WEB前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了HTML5中的多媒体标签，包括<audio>标签的使用，详细讲解了controls属性、常用方法以及如何判断音频类型的支持情况。此外，还讨论了<source>标签在指定多源文件中的作用。对于拖拽功能，提到了默认可拖动的元素如<img>和<a>，以及如何通过设置draggable属性实现其他元素的拖动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.多媒体标签

1.音频：<audio src=“这里面用来存放文件的路径” controls>（如果浏览器不支持就显示）不支持时显示</audio>

controls属性：属性值与属性名同。可以省略。控制显浏览器默认控制条。

常用方法：play()播放视频音频方法

pause() 暂停播放

load() 重新加载文件

anPlayType(type) 判断是否可播放该类型的音频、视频。返回值：probably：支持播放 maybe：可能支持字符串：不支持播放

2.视频：<video src=“…” controls>不支持时显示</video>
controls属性：属性值与属性名同。可以省略。控制显示默认控制条。

source标签：用来指定多个音频或视频文件源。

属性

currentTime 返回播放器正在播放音频、视频当前所处时间点。单位：秒
duration 返回音频或视频的持续时间。单位：秒
ended 返回boolean值。表示播放是否结束
muted 返回boolean值。表示是否处于静音状态
paused 返回boolean值。表示是否处于暂停状态
startTime 返回播放器播放音频、视频的开始时间。通常为0，（不可修改）
volume 返回播放器的音量。

2.拖拽放

拖默认可以在浏览器上可以拖动的元素有<img>和<a>标签

draggable 属性：其他元素该属性值为true，则可被拖动。

dropElement.ondragover = function(evt){
	//设置可接受元素拖入
	evt.preventDefault();

}

chrome：可直接显示拖动效果
Firefox：需要为ondragstart事件指定监听器，携带数据，才能显示拖动效果。

放

Dragelement.ondragstart = function(evt){
	   //设置元素拖动时携带的数据

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

放置

Dropelement.ondrop = function(evt){
	//阻止默认方式
	evt.preventDefault();
	//获取到携带的数据并显示到页面上   	
 var data=evt.dataTransfer.getData("Text");	
evt.target.appendChild(document.getElementById(data));
}