HTML 视频标签的源代码不适用于 Base64 代码

问题描述 投票：0回答：1

我的项目是关于用户选择一个目录，然后程序获取该目录中的所有视频，并通过视频播放器的帮助显示视频的内容。这张照片可以解释项目布局：（右侧是您选择视频的位置，左侧是视频播放的位置）

到目前为止我已经使用了普通的 javascript。这是代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Video Player</title>
</head>
<body>
    <div class="select-folder-div">
        <input type="file" name="file" id="file-selector" class="file-selector" 
webkitdirectory multiple>
    </div>
    <div class="main-div">
        <div class="video-player-div" id="video-player-div">

        </div>
        <div class="video-chooser-div" id="video-chooser-div">
        
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS：

body {
    background: rgb(34, 32, 32);
    color: rgb(204, 87, 204);
    font-size: 1.5em;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans 
Unicode', Geneva, Verdana, sans-serif;
}

.main-div {
    display: flex;
    flex-direction: row;
}

.video-player-div{
    display: flex;
    align-items: center;
    align-self: flex-start;
    border: 5px solid rgb(204, 87, 204);
    width: 70%;
    margin-top: 5%;
    margin-bottom: 10%;
    margin-left: 3%;
    margin-right: 3%;
    padding: 3%;
}

.video-chooser-div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    border: 5px solid rgb(204, 87, 204);
    width: 21%;
    margin-top: 5%;
    margin-bottom: 10%;
    margin-right: 3%;
    padding: 3%;
    overflow: auto;
}

.file-selector {
    margin-left: 45%;
    margin-top: 3%;
}

.video-name:hover {
    cursor: pointer;
    color: blueviolet;
}

.video-name:active {
    color: rgb(99, 14, 178);
}

Javascript：

const directoryInput = document.getElementById("file-selector");
const videoChooser = document.getElementById("video-chooser-div");
const videoPlayer = document.getElementById("video-player-div");

directoryInput.addEventListener("change", (event) => {
    videoChooser.innerHTML = "";

    for (const file of event.target.files) {
        if (file.name.endsWith(".mp4")) {
            let videoContentDiv = document.createElement("div");
            videoContentDiv.className = "video-content";

            let videoName = file.name;
            let videoNameTag = document.createElement("p");
            videoNameTag.className = "video-name";
            videoNameTag.textContent = videoName;

            videoContentDiv.appendChild(videoNameTag);

            videoChooser.appendChild(videoContentDiv);

            videoContentDiv.addEventListener("click", () => {
                videoPlayer.innerHTML = "";

                const video = document.createElement("video");

                const reader = new FileReader();
                reader.onload = (event) => {
                    video.src = event.target.result;
                    console.log(video.src)
                };
                reader.readAsDataURL(file); 
            
                video.width = "100%";
                video.controls = true;

                videoPlayer.appendChild(video);
            });
        }
    }
}, false);

问题是我可以选择一个目录并显示其中的所有 mp4 内容，但是当我单击文本时，视频标签不会显示。当我检查 div 内的内容时，确实有一个以 base64 代码作为源的视频标签，但屏幕上没有任何内容，甚至没有一个空的视频位置。我尝试检查base64，当我向下滚动时，我想我意识到base64内部有空的部分，我不确定这是否正常。即使是这样我也不知道如何解决。

javascript html base64 html5-video base64url
1个回答
0
投票

您可以简化您的代码。
在 HTML 中添加静态 

<video>
元素，如果 src 为空，则通过 css 隐藏它

video[src=""] {
  opacity: 0
}

上传时，您创建一个对象 URL 

URL.createObjectURL(file);
并将其保存到新的播放列表项。

然后添加一个点击事件，将当前视频 src 属性与播放列表项的对象 URL 交换（例如保存在数据属性中）。

const directoryInput = document.getElementById("file-selector");
const videoChooser = document.getElementById("video-chooser-div");
const videoPlayer = document.getElementById("video-player-div");

directoryInput.addEventListener("change", (event) => {
  videoChooser.innerHTML = "";

  for (const file of event.target.files) {

    if (file.name.endsWith(".mp4")) {
      let videoContentDiv = document.createElement("div");
      videoContentDiv.className = "video-content";

      // add playlist items
      let videoName = file.name;
      let videoNameTag = document.createElement("p");
      videoNameTag.className = "video-name";
      videoNameTag.textContent = videoName;

      // create object url and save it in data attribute 
      videoNameTag.dataset.src = URL.createObjectURL(file);

      // play playlist item on click
      videoNameTag.addEventListener('click', e => {
        video.src = e.currentTarget.dataset.src;
        video.play()
      })

      videoContentDiv.appendChild(videoNameTag);
      videoChooser.appendChild(videoContentDiv);

    }
  }
}, false);
body {
  background: rgb(34, 32, 32);
  color: rgb(204, 87, 204);
  font-size: 1.5em;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans 
 Unicode', Geneva, Verdana, sans-serif;

}

.main-div {
  display: flex;
  flex-direction: row;
}

.video-player-div {
  display: flex;
  align-items: center;
  align-self: flex-start;
  border: 5px solid rgb(204, 87, 204);
  width: 70%;
  margin-top: 5%;
  margin-bottom: 10%;
  margin-left: 3%;
  margin-right: 3%;
  padding: 3%;
}

.video-chooser-div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  border: 5px solid rgb(204, 87, 204);
  width: 21%;
  margin-top: 5%;
  margin-bottom: 10%;
  margin-right: 3%;
  padding: 3%;
  overflow: auto;
}

.file-selector {
  margin-left: 45%;
  margin-top: 3%;
}

.video-name:hover {
  cursor: pointer;
  color: blueviolet;
}

.video-name:active {
  color: rgb(99, 14, 178);
}

/* hide empty video elements */
video[src=""] {
  opacity: 0
}
<div class="select-folder-div">
  <input type="file" name="file" id="file-selector" class="file-selector" multiple>
</div>
<div class="main-div">
  <div class="video-player-div" id="video-player-div">

    <video id="video" style="width:100%; height:100%" src="" controls>
    </video>
  </div>
  <div class="video-chooser-div" id="video-chooser-div">
  </div>
</div>

这种方法应该比创建 base64 数据 URL 更有效。此外，使用 base64 时，您可能会遇到由于 URL 长度限制 导致的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.