前端demo: 实现对视频文件和Base64编码的相互转换

最新推荐文章于 2024-03-11 08:55:24 发布

Bee.Bee.

最新推荐文章于 2024-03-11 08:55:24 发布

阅读量1.1k

点赞数 7

分类专栏：前端demo 文章标签：前端

本文链接：https://blog.csdn.net/weixin_49015558/article/details/135844663

版权

前端demo 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.convertVideoToBase64函数将视频文件转化为base64data；

2.base64UrlToFile函数接收base64Url, filename, type三个参数，将base64Url转换为视频文件，返回文件对象；

3.convertAndPlayVideo测试函数，将转换后的视频进行播放

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>视频文件转换为Base64编码</title>
    <style>
      * {
        margin: 0;
      }
      .box {
        padding: 100px;
        width: 100%;
        margin: 0 auto;
      }
      div {
        margin-top: 20px;
        width: 200px;
      }
      .box-file,
      .box-video {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box-file">
        <input type="file" id="videoInput" accept="video/*" />
        <button onclick="convertVideoToBase64()">转换</button>
        <p id="base64Output"></p>
      </div>
      <div class="box-video">
        <button onclick="convertAndPlayVideo()">播放</button>
        <video id="videoPlayer" controls style="width: 200px"></video>
      </div>
    </div>

    <script>
      let base64data = "";

      function convertVideoToBase64() {
        const videoInput = document.getElementById("videoInput");
        const file = videoInput.files[0];
        if (!file) {
          alert("请先选择一个视频文件");
          return;
        }

        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          base64data = reader.result;
          document.getElementById("base64Output").innerText = base64data;
        };
      }

      //--------------------------
      function base64UrlToFile(base64Url, filename, type) {
        var byteArray = [];
        var contentType = type || "video/mp4";

        let urlData = base64Url.split(",")[1];
        var byteArray = atob(urlData); // 去除"data:type/subtype;base64,"部分，只处理base64编码部分
        var arrayBuffer = new Uint8Array(byteArray.length);
        for (var i = 0; i < byteArray.length; i++) {
          arrayBuffer[i] = byteArray.charCodeAt(i);
        }
        var blob = new Blob([arrayBuffer], { type: contentType });
        let file = new File([blob], filename, { type: contentType });
        return file;
      }

      function convertAndPlayVideo() {
        // var base64Url = `data:video/mp4;base64,${base64data}`; // 替换为你的base64编码的视频数据
        var base64Url = base64data;
        var filename = "example.mp4";

        var videoPlayer = document.getElementById("videoPlayer");
        let file = base64UrlToFile(base64Url, filename);
        var videoUrl = URL.createObjectURL(file); // 调用函数将base64编码的视频转为URL
        videoPlayer.src = videoUrl; // 设置视频源为转换后的URL
      }
    </script>
  </body>
</html>