JWPlayer - customize listbar to add a “download” l

We have the need to allow our users to download any video they're currently watching in the JWPlayer. The most logical way to do this would be to add a "download" link in the playlist/listbar. Can the listbar be customized to this extent?

回答1:

Here is a quick demo, I updated it so it works on a per playlist item basis, and I made the image base64encoded so you don't have to host the download png on your server:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="http://www.jwplayer.com/wp-content/themes/jwplayer-105/favicon.ico">
    <title>Adding a Video Download Button</title>
    <script type='text/javascript' src='http://p.jwpcdn.com/6/8/jwplayer.js'></script>
    <style type="text/css">
      body { 
        margin: 0; padding: 0 
    }
    </style>
</head>
<body>
<div id="container"></div>
<script>
jwplayer("container").setup({
  image: "http://content.bitsontherun.com/thumbs/bkaovAYt-640.jpg",
  file: "http://content.bitsontherun.com/videos/bkaovAYt-kNspJqnJ.mp4"
});
jwplayer().addButton(
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRDc2NUM3RDFEMEMxMUUyQjU2QUFCQUEyM0JGREJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRDc2NUM3RTFEMEMxMUUyQjU2QUFCQUEyM0JGREJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJENzY1QzdCMUQwQzExRTJCNTZBQUJBQTIzQkZEQkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJENzY1QzdDMUQwQzExRTJCNTZBQUJBQTIzQkZEQkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+czMQdgAAAPdJREFUeNpi+P//PwMOzATEh/9jgp149DAwMeAGjFCMTRwnwGcgLnmKDGSgpoF/yfEyCxqfDYiTgZgZiP8BsTAWPSJAnATEXFBL5wLxL7gslpidiBSj/7DE8l8kdhtUD9wMbFHPAsQ9/wmDFmzJBld64gHi83gM24juMkIGgrAaEN/AYtg1IFbGpQ+fgSBsDMT3kAy7DcR6+PQQMhCEHZEMtCeknhFsKmGQD0oQQDyJYKoHGigEpGOBWAoq9g9NDcig31A2K5aEDcvzoLS4CeTM0v/UA8dBWY+PgXqAC5T1ZgLxdyAWQvIiOQUGKKh2ExspRAOAAAMARqI5WRk9ASEAAAAASUVORK5CYII%3D",
  "Download Video",
  function(){
    window.location.href = jwplayer().getPlaylistItem()['file'];
  },
  "download"
);
</script>
</body>
</html>

回答2:

Check this

<script>
  jwplayer("myElement").setup({
    image: "/uploads/myPoster.jpg",
    file: "/uploads/myVideo.mp4"
  });
</script>

<script>
  jwplayer().addButton(
    "/uploads/myButton.png",
    "Download Video", 
    function() {
      window.location.href = jwplayer().getPlaylist()[0].sources[0].file;
    },
    "download"
);
</script>

Drawback : only works for one video not for playlist (source : download-button-and-playlist)

Reference - video-download-button

Hope it helps :)