本地视频播放网页

csx · 发表于 2025-9-21 14:58

公司需要很多人落实监控违章情况，由监控室落实好视频并编号存储成MP4文件，和表格文件，表格文件中视频文件的名字，然后打包发到工作群里，然后由各组长对本组问题进行落实，大家每次都登录微信到电脑上然后下载在找到自己负责的视频编号，有的电脑上播放器还有广告，给大家工作带来了很多麻烦，根据这个情况，我写了个小网页，方便大家使用，目前大家感觉很好用，分享出来，看有没有人也能用到。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>河口监控落实辅助工具</title>
<style>
      /* 基础样式 */
      body {
         font-family: 'Arial', sans-serif;
         line-height: 1.6;
         margin: 0;
         padding: 20px;
         background-color: #f4f4f4;
         color: #333333;
      }

      /* 标题和输入框区域 */
      h1 {
         color: #0056b3;
         text-align: center;
         margin-bottom: 30px;
      }

      .container {
         max-width: 100%;
         margin: 0 auto;
      }

      .input-container {
         background: #ffffff;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         margin-bottom: 20px;
      }

      label {
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
      }

      input[type="text"] {
         width: calc(100% - 100px); /* 为按钮留出空间 */
         padding: 8px;
         border: 1px solid #ddd;
         border-radius: 4px;
         margin-bottom: 10px;
      }

      button {
         padding: 8px 16px;
         background-color: #007bff;
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
      }

      button:hover {
         background-color: #0056b3;
      }

      /* 视频列表 */
      #video-list {
         list-style-type: none;
         padding: 0;
         margin: 0;
      }

      #video-list li {
         display: flex;
         align-items: center;
         justify-content: space-between;
         background: #ffffff;
         margin-top: 10px;
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
      }

      /* 视频播放器 */
      #video-player {
         width: 100%; /* 占满容器宽度 */
         height: auto; /* 自动调整高度 */
         margin: 20px 0;
         background: #000000;
         border-radius: 4px;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
         .input-container {
            padding: 15px;
         }

         input[type="text"] {
            width: calc(100% - 100px); /* 适应按钮大小 */
         }

         button {
            width: 100%;
            margin-top: 10px;
         }

         #video-player {
            width: 100%; /* 在小屏幕上占满宽度 */
            height: auto; /* 自动调整高度 */
         }
      }
</style>
      
<script>
// 禁止右键菜单
document.oncontextmenu = function() { return false; }

// 禁止Ctrl+U查看源码
document.onkeydown = function(e) {
  if (e.ctrlKey && (e.keyCode === 85 || e.keyCode === 117)) { // 阻止Ctrl+U
return false;
  }
  if (e.keyCode === 123) { // 阻止F12
return false;
  }
}
</script>

<style>
/* 禁止文本选择 */
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 隐藏视频真实路径 */
#video-player source {
  display: none !important;
}
</style>
</head>
<body>
<div class="container">
      <h1>河口监控落实工具</h1>

      <div class="input-container">
         <label for="video-input">请按照监控代码输入文件名(省略.mp4):</label>
         <input type="text" id="video-input" placeholder="例如: 021101,021102,021103">
         <button>查找</button>
      </div>

      <ul id="video-list"></ul>

      <video id="video-player" controls></video>
</div>

<script>
      let videoListItems = []; // 存储视频列表项

      const videoList = document.getElementById('video-list');
      const videoPlayer = document.getElementById('video-player');

      function addVideoToList(fileName) {
         const listItem = document.createElement('li');
         listItem.textContent = fileName + '.mp4';

         // 添加播放按钮
         const playButton = document.createElement('button');
         playButton.textContent = '播放';
         playButton.addEventListener('click', () => {
            videoPlayer.src = `videos/${fileName}.mp4`;
            videoPlayer.load();
            videoPlayer.play();
         });

         listItem.appendChild(playButton);
         videoList.appendChild(listItem);
         videoListItems.push(listItem); // 存储以备清除
      }

      function addVideos() {
         // 清空当前列表
         videoListItems.forEach(item => videoList.removeChild(item));
         videoListItems = [];

         const input = document.getElementById('video-input').value.trim();
         const fileNames = input ? input.split(',') : [];

         fileNames.forEach(fileName => {
            const trimmedFileName = fileName.trim();
            if (trimmedFileName) {
                  addVideoToList(trimmedFileName);
            }
         });
      }
</script>
</body>
</html>
使用方法：建立一个文本文档把以上内容复制进去，改后缀名为html，然后在新建一个空文件夹“videos”里面放你需要播放的视频文件，用小皮简单设置一下网页目录就可以使用了。

账号		自动登录	找回密码
密码			立即注册

本地视频播放网页

论坛元老

灌水之王