Question

我们需要允许我们的用户下载他们目前在JWPlayer中观看的任何视频。最合乎逻辑的方法是添加一个＆＃34;下载＆＃34;播放列表/列表栏中的链接。列表栏可以自定义吗？

Answer 1

这是一个快速演示，我更新了它，因此它适用于每个播放列表项目，我将图像base64编码，因此您不必在服务器上托管下载png：

<!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>

Answer 2

检查

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

缺点：仅适用于一个不适用于播放列表的视频（来源：download-button-and-playlist）

参考 - video-download-button

希望有所帮助:)

JWPlayer - 自定义列表栏以添加“下载”链接

2 个答案: