How to treat long Data uri in codes

Question

I use data URI, base64 to add images and videos to my games, but I found if I want to make a game with multiple videos it will be really bad code with more than 500 lines for each video, so is there any advice to treat this type of file, what I really do that I make a Mixin file and I 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 would recommend using a bundler like (webpack, parcel, rollup, browserify,...) you can programm in several files and before deployment the bundler will combine all files into an single file (and minifiy it).

Using a bundler like webpack you can create a json file with all dataurl's like:

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

in the app script:

 import videoData from './data.json';

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

and in the application file you can import teh json-file, and it will be integrated on the bundler build action. And create a single file with all files for the application.

For details on webpack and how to setup your project checkout the documentation. It is too long to describe it in an answer, and there are already good articles / video's out there. (but you can also use any other bundler)

I my answer points you in the right direction.

Extra Info: If you use webpack you would need to use the plugins "html-webpack-plugin" and "html-inline-script-webpack-plugin"

btw.: you can use webpack also to inline assets (images, video, ...) into a file, without the need for you to convert them to base64 yourself. (link to the documentation)

Update:

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

Install with npm these packages

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

than create a basic config 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 a demo app 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 project structure for the demo would look like this:

And it would create just one output html-file, all other files are inlined.