Demo介绍
- 一个简单的视频播放器应用，其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频，播放器会自动播放每个视频并在播放完毕后切换到下一个视频。
- 本项目旨在通过自动化脚本和动态网页渲染，帮助用户快速生成并展示本地视频资源（如教学视频）。使用批处理脚本从指定文件夹中读取所有视频文件的信息，并利用JavaScript在HTML页面上动态渲染视频列表，用户可以方便地浏览、播放这些视频。
批处理脚本生成视频列表
通过批处理脚本自动扫描本地指定文件夹中的所有视频文件，获取视频文件的名称和路径，然后将每个视频的文件路径和标题生成一个 JavaScript 数组，并将该数组输出到一个 .txt 文件中
@echo off：关闭命令行窗口的回显，即不显示执行的命令setlocal enabledelayedexpansion：启用延迟变量扩展，使得在同一代码块中可以动态更新和使用变量的值（特别是使用!来访问变量的实时值）set folderPath="E:\Videos"：定义了视频文件所在的文件夹路径。这个路径包含了所有的视频文件set outputPath="%cd%\视频列表.txt"：定义了输出文件的路径，%cd%表示当前目录，所以视频列表会被保存在当前目录下的视频列表.txt 文件中set fileExtension=MP4：定义了视频文件的扩展名，这里设置为 MP4，即只会处理 .MP4 文件echo var videos = [ > %outputPath%：将 var videos = [ 写入到输出文件 视频列表.txt 中，开始构建 JavaScript 数组的定义
for %%f in (%folderPath%\*.%fileExtension%) do (：遍历指定文件夹（%folderPath%）中所有扩展名为 .MP4 的文件%%f：循环变量，表示每个文件set "fileName=%%~nxf"：提取文件的完整文件名（包括扩展名），并赋值给 fileName 变量
%%~n：获取文件名%%~x：获取文件扩展名%%~nxf：获取完整的文件名（包含扩展名）
set "fileTitle=%%~nf"：提取文件名（不包含扩展名），并赋值给 fileTitle 变量%%~nf：%%~n：获取文件名，不包含扩展名
@echo off
setlocal enabledelayedexpansion
set folderPath="E:\Videos"
set outputPath="%cd%\视频列表.txt"
set fileExtension=MP4
echo var videos = [ > %outputPath%
for %%f in (%folderPath%\*.%fileExtension%) do (
set "fileName=%%~nxf"
set "fileTitle=%%~nf"
echo { >> %outputPath%
echo src: "!fileName!", >> %outputPath%
echo title: "!fileTitle!" >> %outputPath%
echo }, >> %outputPath%
)
echo ]; >> %outputPath%
echo { >> %outputPath%：向输出文件添加一个新的对象 {，开始写入一个视频对象echo src: "!fileName!", >> %outputPath%：将视频文件的完整名称（包括扩展名）写入 src 字段echo title: "!fileTitle!" >> %outputPath%：将视频文件的文件名（不包括扩展名）写入 title 字段echo }, >> %outputPath%：结束当前对象，并添加一个逗号，准备写入下一个视频文件的信息
最终输出的 .txt 文件
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.one {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.one #videoList {
width: 300px;
height: 100%;
max-height: 100vh;
margin: 0px;
color: #fff;
background: rgb(123, 202, 252);
overflow: scroll;
overflow-x: hidden;
padding-left: 0;
border: 8px groove rgb(123, 202, 252);
}
.one #videoList::-webkit-scrollbar {
width: 0;
height: 0;
}
.one #videoList li {
cursor: pointer;
line-height: 30px;
border-bottom: 1px solid #fff;
padding: 10px;
list-style: none;
margin: 0px;
}
.one #videoList li:hover {
font-weight: bold;
}
.one .selected {
background: #fff;
color: rgb(123, 202, 252);
font-weight: bold;
}
.one #myVideo {
border: 8px groove rgb(123, 202, 252);
}
</style>
</head>
<body>
<div class="one">
<ul id="videoList"></ul>
<video id="myVideo" width="600" height="400" controls></video>
</div>
<script>
// 获取视频列表和视频播放器元素
var videoList = document.getElementById('videoList');
var myVideo = document.getElementById('myVideo');
// 批处理脚本获取到的视频列表数据
var videos = [];
// 动态生成视频列表
videos.forEach(function (video, index) {
var li = document.createElement('li'); // 创建列表项
li.textContent = video.title; // 设置列表项的文本内容为视频标题
li.setAttribute('data-src', video.src); // 设置自定义属性存储视频源
li.addEventListener('click', function () { // 为每个列表项添加点击事件
loadVideo(video.src, li); // 加载选中的视频
});
videoList.appendChild(li); // 将列表项添加到视频列表中
});
// 加载视频并更新选中状态
function loadVideo(src, listItem) {
myVideo.src = src; // 设置视频播放器的源为选中的视频
myVideo.play(); // 播放视频
// 清除之前的选中状态
var selected = document.querySelector('.selected');
if (selected) {
selected.classList.remove('selected');
}
// 添加选中样式到当前点击的列表项
listItem.classList.add('selected');
}
// 初始化页面，默认加载第一个视频
if (videos.length > 0) {
loadVideo(videos[0].src, videoList.children[0]); // 默认加载第一个视频并设置选中
}
</script>
</body>
</html>
