Gestion du code des URI de données longs

Question

J'utilise des données URI, base64 pour ajouter des images et des vidéos à mon jeu, mais j'ai découvert que si je veux créer un jeu avec plusieurs vidéos, chaque vidéo comportera plus de 500 lignes de code, alors existe-t-il une bonne méthode ? Il est recommandé de gérer ce type de fichier, ce que j'ai réellement fait a été de créer un fichier Mixin et de créer plusieurs fonctions qui renvoient base64.

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

P粉605233764 · Answer

Je recommande d'utiliser un bundler comme (webpack, parcel, rollup, browserify, etc.), vous pouvez programmer dans plusieurs fichiers et avant le déploiement, le bundler fusionnera tous les fichiers en un seul fichier ( et le réduira) .

En utilisant un bundler comme webpack vous pouvez créer un fichier json contenant toutes les dataurls comme :

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

Dans le script d'application :

import videoData from './data.json';

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

Et dans le fichier d'application, vous pouvez importer le fichier json et il sera intégré à l'action de construction du bundler. Et créez un fichier unique qui contient tous les fichiers de l'application.

Pour plus d'informations sur webpack et comment configurer votre projet consultez la documentation . C'est trop long de le décrire dans une réponse, et il existe déjà de bons articles/vidéos à ce sujet. (mais vous pouvez également utiliser n'importe quel autre bundler)

Ma réponse vous a orienté dans la bonne direction.

Mise à jour :

Un petit projet de démonstration (si vous avez node et npm installés) :

Installez ces packages en utilisant npm

html-inline-script-webpack-plugin
html-webpack-plugin
Forfait Réseau
webpack-cli

Créez un fichier de configuration de base pour 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(),
    ],
};

Voici le code de l'application démo :

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