Code handling of lengthy data URIs

Question

I use data URI, base64 to add images and videos to my game, but I found that if I want to make a game with multiple videos, each video will be over 500 lines of code, so is there anything Good method? It is recommended to handle this type of file, what I really did was make a Mixin file and make multiple functions that return base64.

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

Answer 1

I recommend using a bundler like (webpack, parcel, rollup, browserify, etc.) where you can program in multiple files and the bundler will merge all the files before deploying into a file (and minify it) .

Using a bundler like webpack you can create a json file containing all the dataurls, for example:

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

In application script:

import videoData from './data.json';

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

And in the application file you can import the json file and it will be integrated into the bundler build action. And create a single file that contains all the files of the application.

For more information about webpack and how to set up your project Check the documentation. It's too long to describe it in an answer, and there are already good articles/videos on it. (but you can also use any other bundler)

My answer points you in the right direction.

renew:

A small demo project (if you have node and npm installed) :

Use npmInstall these packages

• html-inline-script-webpack-plugin
• html-webpack-plugin
• network packet
• webpack-cli

Create a basic configuration file for 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(),
    ],
};

Here is the demo application code:

// 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);

The demo project structure is as follows:

It will only create an output html file, all other files will be inlined.