本地视频播放器

小九九 · 发表于 2023-8-1 14:36:38

[mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>本地视频播放</title>
  <style>
html, body {
   height: 100%;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

#videoContainer {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

#videoPlayer {
   max-width: 100%;
   max-height: 100%;
}
  </style>
</head>
<body>
  <div id="videoContainer">
<input type="file" id="videoFile" accept="video/*">
<div>
   <video id="videoPlayer" controls></video>
</div>
  </div>

  <script>
const videoFileInput = document.getElementById('videoFile');
const videoPlayer = document.getElementById('videoPlayer');

videoFileInput.addEventListener('change', function() {
   const file = this.files[0];
   const videoURL = URL.createObjectURL(file);
   videoPlayer.src = videoURL;
});
  </script>
</body>
</html>[/mw_shl_code]

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