video标签插入一个删除按钮
时间: 2024-09-19 12:12:26 浏览: 24
在HTML中,如果你想在`<video>`元素旁边添加一个删除按钮,你可以这样做:
```html
<video controls id="myVideo">
<!-- 视频源 -->
<source src="your_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button onclick="deleteVideo()">删除</button>
<script>
function deleteVideo() {
var video = document.getElementById('myVideo');
if (video.paused || video.ended) { // 检查视频是否已经结束播放
video.remove(); // 删除视频元素
} else {
alert('请先停止播放再删除.'); // 如果视频正在播放,则给出提示
}
}
</script>
```
在这个例子中,我们创建了一个`<video>`元素,它有一个`controls`属性,用于显示默认的播放控制。然后我们添加了一个点击事件监听器到`<button>`元素上,当用户点击“删除”按钮时,会触发`deleteVideo()`函数。这个函数首先检查视频是否已暂停或结束,如果满足条件就从DOM中移除`<video>`元素。
注意:`remove()`方法会立即停止并卸载视频,所以务必确保在合适的时机调用此方法。