MP4 Video Plugin

It allows to play video in mp4 format obtained by progressive download. This format is the most compatible, both on the browser and server side, since the video files can be supplied by any HTTP server. This plugin is included in the @asicupv/paella-core package, so you don’t need to add it explicitly at the player initialization.

The default implementation of the mp4 plugin in paella-core does not support multi quality streams. To implement this functionality, it is recommended to use the HLS video plugin included in @asicupv/paella-video-plugins. But if you want to use mp4 videos with multi quality streams, you can use the MP4 multi quality plugin, also available in @asicupv/paella-video-plugins.

Configuration

Despite of beeing included in paella-core, the mp4 plugin is not enabled by default. To use it, you need to add it to the configuration of the player.

{
    "plugins": {
        ...
        "es.upv.paella.mp4VideoFormat": {
            "enabled": true,
            "order": 1
        },
        ...
    }
}

If there is more than one stream type in a stream within the video manifest that is compatible with the current configuration, the plugin whose value in the order attribute is lower will be used. For more information, see the video format plugins documentation.

crossorigin

By default, the crossorigin attribute of the HTML video is added without content:

...
<video crossorigin >
  ...
</video>

If any other value needs to be configured, the crossOrigin configuration parameter can be used:

{
    "plugins": {
        ...
        "es.upv.paella.mp4VideoFormat": {
            "enabled": true,
            "order": 1,
            "crossOrigin": "user-credentials"
        },
        ...
    }
}

To prevent the crossorigin attribute from being added to the <video> element, you can set the configuration value to false:

"es.upv.paella.mp4VideoFormat": {
    "enabled": true,
    "order": 1,
    "crossOrigin": false
}

Video manifest format

{
  ...
  "streams": [
    {
      "sources": {
        "mp4": [
          {
            "src": "video.mp4",
            "mimetype": "video/mp4",
            "res": {
              "w": 640,
              "h": 480
            }
          }
        ]
      }
    }
  ]
}

The format identifier is mp4. In previous versions, the source array could contain more than one element, representing the videos available for the different qualities. As we have said before, the default implementation of the mp4 plugin in paella-core does not support multi quality streams. For this reason, the array can only contain one element, so if the array contains more than one element, the one with the highest resolution will be loaded. For that reason, it is important to specify the res attribute to correctly identify the resolution of the video.

• src: Absolute URL or relative path to the video manifest file, which indicates the location of the mp4 file corresponding to the source.
• mimetype: the mimetype format. Currently it can only contain video/mp4, but it is mandatory to add it in case more formats are supported in the future.
• res: the video resolution. Is an object formed by two attributes: w for width and h for height. This attribute is also required.

Prevent video download

There is no way to prevent the user from downloading an mp4 video, as this is a feature that is natively implemented by the browser, but we can make it a bit more complicated by preventing the context menu of the video from being shown. There is no API implemented for this, but it is easy to do it through the PLAYER_LOADED event. What we’ll do is intercept the native contextmenu event of the video elements:

...
const player = new Paella('playerContainer', {...});

player.bindEvent(Events.PLAYER_LOADED, () => {
  player.videoContainer.streamProvider.players.forEach(player => {
    player.video?.addEventListener("contextmenu", (e) => {
      e.preventDefault();
    });
  });
});

await player.loadManifest();
...

About enable/disable video API

The enable/disable video API allows to stop playing the video when it’s hidden. This is a feature of the base video plugin class that must be implemented by the video plugin.

The use of enable/disable video API has been removed due to a very unstable behaviour. For this reason, mp4 streams are always played even if they are hidden. The malfunction is reproducible in almost all browsers. Problems occur when trying to remove and re-add the video tag to the DOM tree. We recommend using the HLS video plugin, which although it does not have these functions implemented, will save bandwidth if variable bitrate streams are configured.