Codeverarbeitung langer Daten-URIs

Question

Ich verwende den Daten-URI, base64, um Bilder und Videos zu meinem Spiel hinzuzufügen, aber ich habe festgestellt, dass jedes Video mehr als 500 Zeilen Code umfasst, wenn ich ein Spiel mit mehreren Videos erstellen möchte. Gibt es also eine gute Methode? Es wird empfohlen, mit diesem Dateityp umzugehen. Ich habe tatsächlich eine Mixin-Datei erstellt und mehrere Funktionen erstellt, die Base64 zurückgeben.

export default{
    stage1(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
    stage2(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
}

P粉605233764 · Answer

我建议使用像（webpack、parcel、rollup、browserify等）这样的捆绑器，您可以在多个文件中进行编程，并且在部署之前，捆绑器会将所有文件合并到一个文件中< em>（并缩小它）。

使用像 webpack 这样的打包器，您可以创建一个包含所有 dataurl 的 json 文件，例如：

// filename data.json
{
    "video1": "data:video/mp4;base64,AAAA...", 
    "video2": "data:video/mp4;base64,AAAA...", 
    "video3": "data:video/mp4;base64,AAAA...",
    // ...
}

在应用程序脚本中：

import videoData from './data.json';

 ...
     stage1(){
         return videoData.video1;
     }
     stage2(){
         return videoData.video2;
     }
 ...

并且在应用程序文件中，您可以导入 json 文件，它将集成到捆绑器构建操作中。 并创建一个包含应用程序所有文件的单个文件。

有关 webpack 以及如何设置项目的详细信息查看文档。在答案中描述它太长了，而且已经有很好的文章/视频了。 （但您也可以使用任何其他捆绑器）

我的回答为您指明了正确的方向。

更新：

一个小型演示项目（如果您安装了 node 和 npm）：

使用npm安装这些软件包

html-inline-script-webpack-plugin
html-webpack-插件
网络包
webpack-cli

为 webpack 创建基本配置文件：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "scripts/app.js"),
    output: {
        path: path.resolve(__dirname, './dist'),
    },
    module:{
        rules: [{
            test: /\.(mp4|png)/,
            type: 'asset/inline'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlInlineScriptPlugin(),
    ],
};

这里是演示应用程序代码：

// app.js
import Phaser from './phaser.min.js';

import videoFile from '../media/video.mp4';
import imageFile from '../media/demo.png';

let base64ImageFile = imageFile;
let base64VideoFile = videoFile;

let config = {
    scene: { 
        preload: function(){
            this.textures.addBase64('demo', base64ImageFile);
            this.load.video('video', base64VideoFile);
        },
        create: function() { 
            this.add.text(10, 10, 'DEMO')
                .setOrigin(0); 
            this.add.image(10, 30, 'demo')
                .setScale(.25)
                .setOrigin(0);
            this.add.video(300, 30, 'video')
                .setScale(.5)
                .setOrigin(0);
        } 
    }
};

new Phaser.Game(config);

演示的项目结构如下所示：

它只会创建一个输出 html 文件，所有其他文件都会内联。

Codeverarbeitung langer Daten-URIs

Antworte allen(1)Ich werde antworten