Pengendalian kod URI data yang panjang

Question

Saya menggunakan URI data, base64 untuk menambahkan imej dan video pada permainan saya, tetapi saya mendapati bahawa jika saya ingin membuat permainan dengan berbilang video, setiap video akan mempunyai lebih daripada 500 baris kod, jadi adakah kaedah yang baik? Adalah disyorkan untuk mengendalikan fail jenis ini, apa yang saya lakukan sebenarnya ialah membuat fail Mixin dan membuat pelbagai fungsi yang mengembalikan base64.

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

Answer 1

Saya syorkan menggunakan berkas seperti (pek web, bungkusan, rollup, browserify, dll.), anda boleh memprogramkan dalam berbilang fail dan sebelum menggunakan, berkas akan menggabungkan semua fail menjadi satu fail ( dan mengecilkannya) .

Menggunakan bundler seperti webpack anda boleh mencipta fail json yang mengandungi semua dataurl seperti:

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

Dalam skrip permohonan:

import videoData from './data.json';

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

Dan dalam fail aplikasi anda boleh mengimport fail json dan ia akan disepadukan ke dalam tindakan bina bundler. Dan buat fail tunggal yang mengandungi semua fail aplikasi.

Untuk maklumat lanjut tentang webpack dan cara menyediakan projek anda lihat dokumentasi . Terlalu panjang untuk menerangkannya dalam jawapan, dan sudah ada artikel/video yang bagus mengenainya. (tetapi anda juga boleh menggunakan mana-mana bundler lain)

Jawapan saya menunjukkan anda ke arah yang betul.

Kemas kini:

Projek demo kecil (jika anda mempunyai nod dan npm dipasang) :

Pasang pakej ini menggunakan npm

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

Buat fail konfigurasi asas untuk 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(),
    ],
};

Berikut ialah kod aplikasi demo:

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

Struktur projek demo adalah seperti berikut:

Ia hanya akan mencipta fail html output, semua fail lain akan diselaraskan.