玖叶教程网

这两天遇见两个关于视频处理的小场景，一个是oss视频资源本地下载的时候，正常的a标签无法下载，直接跳转浏览器tab播放问题。这是因为oss视频资源过大，无法a标签download，需要额外处理。另一个是根据视频资源生成封面的场景。这两个场景都遇到了跨域的问题，在这里记录一下。

1. oss视频资源下载以及处理跨域请求

//oss视频资源下载
const downloadVideo = (url:string, name:string) => {
  // 请求资源
  fetch(url,{
    //处理跨域请求，资源无法获取的问题
    headers:{
      'Access-Control-Allow-Origin':'*'
    }
  })
  // 资源转blob
  .then(response => response.blob())
  .then(blob => {
    // 将blob转为本地url,之后执行下载
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    document.body.appendChild(a);
    a.click();
    // 释放ObjectURL
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  })
  .catch(error => {
    message.error('资源下载失败')
    console.error('Video download error: ', error);
  });
}

2. 视频生成封面以及获取时长

const getFirstFrame = (url:string) => {
  return new Promise((resolve:any) => {
    const video = document.createElement("video")
    video.setAttribute("crossOrigin", "anonymous") //处理跨域
    video.setAttribute("src", url)
    video.setAttribute("preload", "auto")
    // 必须设定宽高才能生成图片
    video.setAttribute("width", "180px")
    video.setAttribute("height", "300px")
    video.addEventListener("loadeddata", function () {
      const duration = Math.floor(video.duration % 60)
      const canvas = document.createElement("canvas"),
        width = video.width, //canvas的尺寸和图片一样
        height = video.height
      canvas.width = width
      canvas.height = height
      canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
      const base64 = canvas.toDataURL("image/jpeg")//获取base46格式的图片文件
      canvas.toBlob(function(blob) {
        resolve({
          duration,
          base64,
          blob
        })
      },"image/jpeg")
      
    })
  })
}

3. 常规的a标签下载

const downloadSource = (url:string,name:string) => {
	const link = document.createElement('a');
  link.href = url;
  link.download = name;
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(url);
  document.body.removeChild(link)
}