【娱乐项目】基于批处理脚本与JavaScript渲染视频列表的Web页面

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 文件