JWPlayer - 自定義列表欄以添加「下載」鏈接

我們需要允許我們的用戶下載他們當前在JWPlayer中觀看的任何視頻。最合理的方法是在播放列表/列表欄中添加一個「下載」鏈接。列表欄可以定製到這個程度嗎？JWPlayer - 自定義列表欄以添加「下載」鏈接

2014-03-06 taglius

下面是一個簡單的演示，我更新了它，所以它的工作原理每個播放列表項的基礎上，和我做了圖像base64encoded所以您不必到主機下載三七總皁苷對您的服務器：

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

來源

2014-03-07 16:35:25 emaxsaun

入住這

<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

希望它能幫助:)

來源

2014-03-07 14:54:52 Hitesh

JWPlayer - 自定義列表欄以添加「下載」鏈接

回答

相關問題