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.

github
// Set up the player
const playerInstance = jwplayer('player').setup({
  playlist: 'https://cdn.jwplayer.com/v2/media/8L4m9FJB'
});

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
  anchor.style.display = 'none';

  // Add the anchor to the page
  document.body.appendChild(anchor);

  // Trigger a click event to activate the anchor
  anchor.click();

  // Remove the anchor from the page, it's not needed anymore
  document.body.removeChild(anchor);
}
This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.