介绍

基于西瓜播放器(xgplayer)，下载改为列表选择，

局限性

由于下载方式为创建 A 标签下载，类似于

<a href="./1.mp4" download>下载按钮</a>

故仅支持同域下载，仅支持 download 属性生效的浏览器（现代浏览器），跨域会直接打开链接

去caniuse查看兼容性

可以自行修改下载方式支持跨域下载

截图

演示

• 体验地址

  体验地址跳转

• 运行 demo

  1. cd demo
  2. npm install
  3. npm run serve
  

使用

• HTML:

  <div id="xgplayer"></div>

• Javascript:

  // 使用downloadList替代download选项
  new Player({
    id: "xgplayer",
    url: "/video.mp4",
    videoInit: true,
    downloadList: [
      {
        title: "直接下载",
        link: "/video.mp4",
      },
      {
        title: "下载页面（新页面）",
        link: "/#/about",
        download: false,
      },
      {
        title: "下载页面（本页面）",
        link: "/#/about",
        download: false,
        outLink: false,
      },
      {
        title: "外链页面（新页面）",
        link: "http://www.baidu.com",
      },
      {
        title: "外链页面（本页面）",
        link: "http://www.baidu.com",
        outLink: false,
      },
    ],
  });

参数说明

属性	类型	必须	默认值	说明
title	String	是	无	展示的名字
link	String	是	无	链接
download	Boolean	否	true	是否开启下载
target	String	否	_blank	A 标签的 target

注：同域跳转页面，不下载文件需设置 download 为 false, 跨域则设置什么都为跳转原因

注：target 仅在跨域或 download 为 false 生效