冗長資料 URI 的程式碼處理
P粉872182023
P粉872182023 2024-02-03 22:56:39
0
1
373

我使用數據URI、base64 將圖像和視頻添加到我的遊戲中,但我發現如果我想製作一個包含多個視頻的遊戲,那麼每個視頻的代碼都會超過500 行,所以有沒有什麼好的方法?建議處理這種類型的文件,我真正做的是製作 Mixin 文件並製作多個返回 base64 的函數。

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

P粉872182023
P粉872182023

全部回覆(1)
P粉605233764

我建議使用像(webpack、parcel、rollup、browserify等)這樣的捆綁器,您可以在多個文件中進行編程,並且在部署之前,捆綁器會將所有文件合併到一個檔案中(並縮小它)。

使用像 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 以及如何設定項目的詳細資訊查看文件。在答案中描述它太長了,而且已經有很好的文章/影片了。 (但您也可以使用任何其他捆綁器)

我的回答為您指明了正確的方向。

更新:

一個小型示範專案(如果您安裝了 nodenpm#)

使用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 文件,所有其他文件都會內聯。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!