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

Demo介绍

批处理脚本生成视频列表

@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%

完整代码

<!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>

在这里插入图片描述