上海建筑 公司网站,免费网站建站塔山双喜,世界十大网站开发公司,专做废旧电子电路板配件回收的网站Demo介绍 一个简单的视频播放器应用#xff0c;其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频#xff0c;播放器会自动播放每个视频并在播放完毕后切换到下一个视频。本项目旨在通过自动化脚本和动态网页渲染#xff0c;帮助…Demo介绍 一个简单的视频播放器应用其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频播放器会自动播放每个视频并在播放完毕后切换到下一个视频。本项目旨在通过自动化脚本和动态网页渲染帮助用户快速生成并展示本地视频资源如教学视频。使用批处理脚本从指定文件夹中读取所有视频文件的信息并利用JavaScript在HTML页面上动态渲染视频列表用户可以方便地浏览、播放这些视频。 批处理脚本生成视频列表 通过批处理脚本自动扫描本地指定文件夹中的所有视频文件获取视频文件的名称和路径然后将每个视频的文件路径和标题生成一个 JavaScript 数组并将该数组输出到一个 .txt 文件中 echo off关闭命令行窗口的回显即不显示执行的命令setlocal enabledelayedexpansion启用延迟变量扩展使得在同一代码块中可以动态更新和使用变量的值特别是使用!来访问变量的实时值set folderPathE:\Videos定义了视频文件所在的文件夹路径。这个路径包含了所有的视频文件set outputPath%cd%\视频列表.txt定义了输出文件的路径%cd%表示当前目录所以视频列表会被保存在当前目录下的视频列表.txt 文件中set fileExtensionMP4定义了视频文件的扩展名这里设置为 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 enabledelayedexpansionset folderPathE:\Videos
set outputPath%cd%\视频列表.txt
set fileExtensionMP4echo var videos [ %outputPath%for %%f in (%folderPath%\*.%fileExtension%) do (set fileName%%~nxfset fileTitle%%~nfecho { %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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {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
/headbodydiv classoneul idvideoList/ulvideo idmyVideo width600 height400 controls/video/divscript// 获取视频列表和视频播放器元素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
