前端：加密video的src

Question

网页上的video标签，用前端技术加密一下，不用在后台获取视频

Answer 1

对网页上的video标签进行加密可以使用JS加密技术和一些加密算法来实现。实现方式如下：

1. 使用 AES 加密算法对视频文件进行加密。可以使用 JS 中的 CryptoJS 库来实现 AES 加密。

2. 在前端页面中，通过 AJAX 向后台请求数据时，使用 HTTPS 协议传输，确保数据的安全性。

3. 加载加密后的视频文件时，需要在前端通过 JS 解密文件，然后再播放。

使用 CryptoJS 对视频文件进行 AES 加密：

// 加密模块引入 CryptoJS
import * as CryptoJS from 'crypto-js'

// 定义密钥和加密向量
const key = CryptoJS.enc.Hex.parse('0123456789abcdef0123456789abcdef')
const iv = CryptoJS.enc.Hex.parse('abcdef9876543210abcdef9876543210')

// 定义加密方法
function encryptVideo(file) {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = () => {
    const arrayBuffer = reader.result
    const wordArray = CryptoJS.lib.WordArray.create(arrayBuffer)
    const encrypted = CryptoJS.AES.encrypt(wordArray, key, {
      iv: iv
    })
    const encryptedBlob = new Blob([encrypted.ciphertext.toString(CryptoJS.enc.Hex)], { type: file.type })
    // blob 对象经过 url.createObjectURL 处理后，即可直接在 video 标签上播放
    const encryptedUrl = URL.createObjectURL(encryptedBlob)
    // 将加密后的视频地址输出到控制台
    console.log(encryptedUrl)
  }
}

// 选择需要加密的文件，并调用加密方法
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.onchange = (e) => {
  encryptVideo(e.target.files[0])
}
document.body.appendChild(fileInput)

这里是仅仅对前端video标签上的加密，如果需要更为安全的视频加密，可以考虑通过后台生成一些有时间限制的加密 URL，以确保视频文件在有效期内播放。