JWPlayer - customize listbar to add a “download” link

问题

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 :)

来源：https://stackoverflow.com/questions/22228024/jwplayer-customize-listbar-to-add-a-download-link

标签

jwplayer