如何在JW Player下方添加视频下载锚点链接？

咱们先拆解下你之前尝试的代码为啥没效果，再给你一套能正常工作的实现方案：

你的代码问题分析 #

• 第一个锚点标签的href写法错误：href属性需要是合法的URL或javascript:开头的代码，你直接写window.location.href = ...浏览器会把它当成字符串地址，根本不会执行JS逻辑；而且就算能执行，这种方式只是跳转到视频地址，不会触发下载行为。
• 第二个按钮的onclick绑定了空的function()，没有实际的下载逻辑，自然啥反应都没有。

正确的实现步骤 #

要实现下载功能，核心是等JW Player初始化完成后，获取当前视频的地址，再通过JS触发浏览器的下载行为，具体代码如下：

1. HTML结构

先准备播放器容器和下载链接（默认隐藏，等播放器就绪后再显示）：

<div id="playerContainer">Loading player...</div>
<a id="downloadBtn" class="button" style="display: none; margin-top: 10px;">Download Video</a>

2. JS逻辑

初始化播放器，并在播放器就绪后绑定下载事件：

// 初始化JW Player
const player = jwplayer("playerContainer").setup({
  file: "your-video-file-url.mp4", // 替换成你的视频地址
  width: 640,
  height: 360,
  // 其他播放器配置项...
});

// 监听播放器就绪事件
player.on("ready", function() {
  const downloadBtn = document.getElementById("downloadBtn");
  // 显示下载按钮
  downloadBtn.style.display = "inline-block";

  // 绑定点击事件
  downloadBtn.addEventListener("click", function(e) {
    e.preventDefault();
    // 获取当前播放视频的地址
    const videoUrl = player.getPlaylistItem().file;
    // 创建临时锚点触发下载
    const tempAnchor = document.createElement("a");
    tempAnchor.href = videoUrl;
    // 自动提取视频文件名作为下载文件名
    tempAnchor.download = videoUrl.split("/").pop();
    // 插入到页面后触发点击，再移除
    document.body.appendChild(tempAnchor);
    tempAnchor.click();
    document.body.removeChild(tempAnchor);
  });
});

额外注意事项 #

• 如果你的视频文件托管在其他域名下，需要服务器配置CORS允许跨域下载，否则浏览器可能会阻止下载请求。
• 确保你使用的JW Player版本支持getPlaylistItem()方法（JW Player 5及以上版本都支持）。

内容的提问来源于stack exchange，提问作者Singh Amrinder Ghumman