video controls 新增按钮
时间: 2023-09-05 21:08:08 浏览: 86
您可以使用HTML和JavaScript来添加自定义按钮到HTML5视频播放器的控件栏中。首先,使用HTML5的`<video>`标签来嵌入视频。然后,使用JavaScript获取video元素,并使用DOM API来添加自定义按钮。以下是一个示例代码片段,它将创建一个名为“New Button”的自定义按钮,并在单击时弹出一个警告框。
```html
<video id="myVideo" width="640" height="360" controls>
<source src="myVideo.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
var newButton = document.createElement("button");
newButton.innerHTML = "New Button";
newButton.onclick = function() {
alert("You clicked the new button!");
};
video.parentNode.insertBefore(newButton, video.nextSibling);
</script>
```
您可以根据需要更改按钮的样式和功能。同时,请注意,不同的浏览器可能会有不同的样式和行为。
相关问题
写一段HTML代码,有一个视频列表,可以进行视频添加操作,点击添加按钮可以从本地选择一个视频文件,视频列表中新增本视频,名称按照视频1、视频2、视频3的顺序以此类推命名,右侧窗口可以进行视频播放,视频播放时有一个按钮点击后可以将当前播放的视频在一个新的tab页打开
<HTML>
<HEAD>
<TITLE>视频列表</TITLE>
</HEAD>
<BODY>
<h1>视频列表</h1>
<table>
<tr>
<th>视频名称</th>
<th>操作</th>
</tr>
<tr>
<td>视频1</td>
<td><button onclick="addVideo()">添加视频</button></td>
</tr>
<tr>
<td>视频2</td>
<td><button onclick="addVideo()">添加视频</button></td>
</tr>
<tr>
<td>视频3</td>
<td><button onclick="addVideo()">添加视频</button></td>
</tr>
<tr>
<td id="newVideo"></td>
<td></td>
</tr>
</table>
<div id="playVideo">
<video width="320" height="240" controls>
<source src="" type="video/mp4">
</video>
<br>
<button onclick="openInNewTab()">在新标签页中打开</button>
</div>
<script>
function addVideo() {
var videoCount = document.getElementsByTagName("tr").length - 4;
var newVideo = document.getElementById("newVideo");
newVideo.innerHTML = "视频" + (videoCount + 1);
}
function openInNewTab() {
var videoUrl = document.getElementsByTagName("source")[0].src;
window.open(videoUrl, '_blank');
}
</script>
</BODY>
</HTML>
阅读全文