当前位置：首页 > article >正文

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

article 2024/12/1 11:42:10

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>