写一段HTML代码,有一个视频列表,可以进行视频添加操作,点击添加按钮可以从本地选择一个视频文件,视频列表中新增本视频,名称按照视频1、视频2、视频3的顺序以此类推命名,右侧窗口可以进行视频播放,视频播放时有一个按钮点击后可以将当前播放的视频在一个新的tab页打开
时间: 2024-06-06 17:10:01 浏览: 69
<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>