html5相关知识

最新推荐文章于 2023-12-01 23:40:26 发布

原创最新推荐文章于 2023-12-01 23:40:26 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍HTML5中video和audio元素的应用，包括播放控制、尺寸调整等特性，并演示了如何利用HTML5实现拖拽功能，使网页更加互动。

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

1.video 视频播放

当浏览器不支持html5的时候，显示这句话</video>

video支持play（）播放，pause()暂停

var myvideo=document.getElementById();

myvideo.width=450;

</script>

2.audio和video 的属性基本相同，同上

3.拖拽实现拖拽两个div之间拖拽图片

具体实例：

function drag(ev) ---当拖拽的时候，将被拖拽的id数据类型设置为text
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)---当放置拖拽的东西时候，调用的时间
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> 首先，图片的draggable 属性为true，可以拖拽
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

4.canvas 元素用于在网页上绘制图形