Class default

Creates standalone HTML packages that can be used to display H5P in a browser without having to use the full H5P server backend.

The bundle includes all JavaScript files, stylesheets, fonts of the H5P core and all libraries used in the content. It also includes base64 encoded resources used in the content itself. This can make the files seriously big, if the content includes video files or lots of high-res images.

The bundle does NOT internalize resources that are included in the content via absolute URLs but only resources that are part of the H5P package.

The HTML exports work with all content types on the official H5P Hub, but there might be unexpected issues with other content types if they behave weirdly and in any kind of non-standard way.

The exported bundle contains license information for each file put into the bundle in a shortened fashion (only includes author and license name and not full license text).

(important!) You need to install these NPM packages for the exporter to work: postcss, postcss-clean, postcss-url, postcss-safe-parser, uglify-js

Constructors

constructor

Properties

config contentStorage coreFilePath editorFilePath libraryStorage template?

Methods

createBundleWithExternalContentResources createSingleBundle

Constructors

constructor

Properties

Protectedconfig

config: IH5PConfig

ProtectedcontentStorage

contentStorage: IContentStorage

ProtectedcoreFilePath

coreFilePath: string

the path on the local filesystem at which the H5P core files can be found. (should contain a js and styles directory)

ProtectededitorFilePath

editorFilePath: string

the path on the local filesystem at which the H5P editor files can be found. (Should contain the scripts, styles and ckeditor directories).

ProtectedlibraryStorage

libraryStorage: ILibraryStorage

Protected Optionaltemplate

template?: IExporterTemplate

Methods

createBundleWithExternalContentResources

  • createBundleWithExternalContentResources(
        contentId: string,
        user: IUser,
        contentResourcesPrefix?: string,
        options?: {
            language?: string;
            showEmbedButton?: boolean;
            showFrame?: boolean;
            showLicenseButton?: boolean;
        },
    ): Promise<{ contentFiles: string[]; html: string }>

    Creates a HTML file that contains all scripts, styles and library resources (images and fonts) inline. All resources used inside the content are only listed and must be retrieved from library storage by the caller.

    Parameters

    • contentId: string

      a content id that can be found in the content repository passed into the constructor

    • user: IUser

      the user who wants to create the bundle

    • contentResourcesPrefix: string = ''

      (optional) if set, the prefix will be added to all content files in the content's parameters; example: contentResourcesPrefix = '123'; filename = 'images/image.jpg' => filename in parameters: '123/images/image.jpg' (the directory separated is added automatically)

    • Optionaloptions: {
          language?: string;
          showEmbedButton?: boolean;
          showFrame?: boolean;
          showLicenseButton?: boolean;
      }

      (optional) allows settings display options, e.g. if there should be a embed button

    Returns Promise<{ contentFiles: string[]; html: string }>

    a HTML string that can be written into a file and a list of content files used by the content; you can use the filenames in IContentStorage.getFileStream. Note that the returned filenames DO NOT include the prefix, so that the caller doesn't have to remove it when calling getFileStream.

    Throws

    H5PError if there are access violations, missing files etc.

createSingleBundle

  • createSingleBundle(
        contentId: string,
        user: IUser,
        options?: {
            language?: string;
            showEmbedButton?: boolean;
            showFrame?: boolean;
            showLicenseButton?: boolean;
        },
    ): Promise<string>

    Creates a single HTML file that contains all scripts, styles and resources (images, videos, etc.) inline. This bundle will grow very large if there are big videos in the content.

    Parameters

    • contentId: string

      a content id that can be found in the content repository passed into the constructor

    • user: IUser

      the user who wants to create the bundle

    • Optionaloptions: {
          language?: string;
          showEmbedButton?: boolean;
          showFrame?: boolean;
          showLicenseButton?: boolean;
      }

      (optional) allows settings display options, e.g. if there should be a embed button

    Returns Promise<string>

    a HTML string that can be written into a file

    Throws

    H5PError if there are access violations, missing files etc.

Settings

Member Visibility

On This Page

Constructors
Properties
Methods