HTML5 网页使用 Base64 音频或视频源

HTML/CSS

发布日期: 2021-07-24

文章字数: 1.3k

阅读时长: 5 分

阅读次数:

HTML5 网页使用 Base64 音频或视频源

视频转 Base64，使用 FileReader 实现

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限。

属性

FileReader.readyState 只读

表示FileReader状态的数字。取值如下：

常量名	值	描述
`EMPTY`	`0`	还没有加载任何数据.
`LOADING`	`1`	数据正在被加载.
`DONE`	`2`	已完成全部的读取请求.

FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件

FileReader.onload

处理load (en-US)事件。该事件在读取操作完成时触发。

因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

方法

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

Data URLs

Data URLs 由四个部分组成：前缀(data:)、指示数据类型的 MIME 类型、如果非文本则为可选的base64标记、数据本身：

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串，例如 “image/jpeg“ 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII

如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。

数据 URI 采用这种格式:

data:[<MIME-type
  >][;charset=<encoding>][;base64],<data></data></encoding
></MIME-type>

MIME型指定URI包含的数据类型。因此，如果您想为图像提供数据URI，则将其指定如下：

<MIME-type> 指定内容格式

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Red dot"
/>

此处使用的MIME类型是图像/PNG，表明编码的数据是PNG图像。

Audio

类似地，如果您想编码OGG音频文件，则将使用MIME类型Audio/OGG如下：

<audio controls src="data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+..........+fm5nB6slBlZ3Fcha363d5ut7u3ni1rLoPf728l3KcK" />

如果要指定MP3文件，则只需将MIME类型设置为“音频/MP3”，并提供编码的MP3音频数据字符串。

请参阅[data URI音频源]（https://iandevlin.com/html5/data-uri/audio.php）的示例。

Video

为编码视频提供数据URI是相同的，为正确的编码数据提供了正确的MIME类型，当然可以与“ source”元素一起使用：

<video controls>
  <source type="video/webm" src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8......jVOrhB9DtnVTrIMQTPc=" />
  <source type="video/mp4" src="data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29....../l/L+X8v5AAAAMgfDg==" />
</video>

See an example of a data URI video source.

Encoding in base64

当然，上面提供的代码示例不会显示任何音频和视频文件的完整数据URI，因为它们将填写整个页面！为了编码数据，我只使用php的base64_encode函数如下：

function getEncodedVideoString($type, $file) {
   return 'data:video/' . $type . ';base64,' . base64_encode(file_get_contents($file));
}

使用HTML的：

<video controls>
  <source type="video/webm" src="<?php echo getEncodedVideoString('webm', 'parrots-small.webm'); ?>" />
  <source type="video/mp4" src="<?php echo getEncodedVideoString('mp4', 'parrots-small.mp4');?>" />
</video>

当然，您可以使用自己喜欢的任何编码文件，这只是一个示例。虽然您可能不想要也不需要base64编码您的音频和视频文件（these reasons on why you might base64 encode images），很高兴知道您可以出现需求。

实现代码

<div class="base64"></div>
<script>
  function genAudio(base64Audio) {
    let audio = document.createElement('audio');
    audio.id = 'audio1';
    audio.loop = 'true';
    audio.autoplay = 'true';
    audio.controls = true;
    audio.src = base64Audio;
    audio.volume = 0.5; // 最小值0.5
    return audio;
  }

  // 新键文件输入框元素
  const input = document.createElement('input');
  input.type = 'file';

  // 文件输入框插入位置
  document.querySelector('.base64').append(input);

  input.onchange = function () {
    const files = input.files; // e.target.files; // FileList
    const reader = new FileReader();
    reader.readAsDataURL(files[0]); // 转Base64

    reader.onload = function () {
      console.log('base64 result:', reader.result);
      const audio = genAudio(reader.result);
      // 音频插入位置
      document.querySelector('.base64').append(audio);
    };
  };
</script>