>  Q&A  >  본문

긴 데이터 URI의 코드 처리

게임에 이미지와 동영상을 추가하기 위해 데이터 URI인 base64를 사용하는데, 여러 개의 동영상으로 게임을 만들려면 각 동영상의 코드가 500줄이 넘을 텐데 좋은 방법이 없을까요? 이런 유형의 파일을 처리하는 것이 좋습니다. 제가 실제로 한 일은 Mixin 파일을 만들고 base64를 반환하는 여러 함수를 만드는 것이었습니다.

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

P粉872182023P粉872182023258일 전384

모든 응답(1)나는 대답할 것이다

  • P粉605233764

    P粉6052337642024-02-04 19:26:46

    저는 (webpack, Parcel, Rollup, Browserify 등)과 같은 번들러 를 사용하는 것이 좋습니다. 여러 파일로 프로그래밍할 수 있으며 배포하기 전에 번들러는 모든 파일을 하나의 파일로 병합< em>(및 축소) 합니다.

    webpack과 같은 번들러를 사용하면 다음과 같은 모든 데이터 URL을 포함하는 json 파일을 만들 수 있습니다.

    으아악

    응용 프로그램 스크립트 내:

    으아악

    그리고 애플리케이션 파일에서 json 파일을 가져올 수 있으며 이는 번들러 빌드 작업에 통합됩니다. 그리고 애플리케이션의 모든 파일이 포함된 단일 파일을 만듭니다.

    webpack 및 프로젝트 설정 방법에 대한 자세한 내용은 문서를 확인하세요 . 답변으로 설명하기에는 너무 길고 이에 대한 좋은 기사/비디오가 이미 있습니다. (그러나 다른 번들러도 사용할 수 있습니다)

    내 대답이 올바른 방향을 가리켰습니다.

    업데이트:

    작은 데모 프로젝트(nodenpm이 설치된 경우) :

    npm

    을 사용하여 이 패키지를 설치하세요.
    • html-inline-script-webpack-plugin
    • html-웹팩-플러그인
    • 네트워크 패키지
    • webpack-cli

    webpack의 기본 구성 파일 만들기:

    으아악

    데모 애플리케이션 코드는 다음과 같습니다.

    으아악

    데모 프로젝트 구조는 다음과 같습니다:

    출력 HTML 파일만 생성되며 다른 모든 파일은 인라인됩니다.

    회신하다
    0
  • 취소회신하다