Developer Guide Javascript API Reference Developer Tools Release Notes

Adding a Download Button

This demo shows you how to allow users to easily download a video file.

// Set up the player
const playerInstance = jwplayer('player').setup({
  playlist: ''

const buttonId = 'download-video-button';
const iconPath = 'assets/download.svg';
const tooltipText = 'Download Video';

// Call the player's `addButton` API method to add the custom button
playerInstance.addButton(iconPath, tooltipText, buttonClickAction, buttonId);

// This function is executed when the button is clicked
function buttonClickAction() {
  const playlistItem = playerInstance.getPlaylistItem();

  // Create an anchor element
  const anchor = document.createElement('a');

  // Set the anchor's `href` attribute to the media's file URL
  const fileUrl = playlistItem.file;
  anchor.setAttribute('href', fileUrl);

  // set the anchor's `download` attribute to the media's file name
  const downloadName = playlistItem.file.split('/').pop();
  anchor.setAttribute('download', downloadName);

  // Set the anchor's style to hide it when it's added to the page = 'none';

  // Add the anchor to the page

  // Trigger a click event to activate the anchor;

  // Remove the anchor from the page, it's not needed anymore