DPlayer m3u8 视频禁止下载

1. 介绍

正常的 m3u8 格式视频通过控制台是无法下载的,但是可以通过插件下载,下面介绍如何规避这个问题。

思路:后端生成一个一次性的密钥,前端放在请求头中,可以防止大部分插件下载。这里只说前端。

2. 实现

集成 DPlayer 播放器这里就不说了,网上一大推。

javascript 复制代码
  // 接口封装
  disposable() {
    return new Promise((resolve, reject) => {
      axios.get('file/disposable').then(res => {
        resolve(res);
      }).catch(err => {
        reject(err);
      });
    });
  },
javascript 复制代码
 // m3u8
 let that = this;
 this.dplayer = new DPlayer({
    container: document.getElementById('page-content-view-video'),
    autoplay: true,
    hotkey: true,
    video: {
      url: 'http:xxxx.m3u8',
      type: 'customHls',
      customType: {
        customHls: function(video, player) {
          let config = {
            xhrSetup: async function(xhr, url) {
              // 这里是为了每个请求携带不同的一次性密钥
              if(url.endsWith('.m3u8')) {
                xhr.setRequestHeader('disposable', await that.$api.disposable());
              }else if(url.endsWith('.ts')) {
                xhr.setRequestHeader('disposable', await that.$api.disposable());
              }
            },
          };
          const hls = new window.Hls(config);
          hls.loadSource(video.src);
          hls.attachMedia(video);
        },
      }
    },
  });
相关推荐
GISer_Jing14 小时前
前端视频技术全解析:从编解码到渲染优化
前端·音视频·状态模式
2401_8858850415 小时前
视频短信接口接入麻不麻烦?API调用说明
android·音视频
2401_8858850415 小时前
视频短信接口集成起来复杂吗?API接入说明
开发语言·php·音视频
lI-_-Il16 小时前
喜马拉雅 v9.4.56.3:移动端全站音频资源畅听版
android·音视频
EasyDSS16 小时前
私有化视频会议系统/视频高清直播点播EasyDSS一站式视频平台赋能智慧校园全场景教学
大数据·音视频
快乐小土豆~~16 小时前
上传视频时截取正脸照片
前端·音视频·vladmandic
GISer_Jing16 小时前
前端视频多模态:编解码、传输、渲染全链路详解
前端·人工智能·音视频
EasyGBS17 小时前
国标GB28181视频分析平台EasyGBS视频质量诊断筑牢校园安全
音视频
愚公搬代码17 小时前
【愚公系列】《剪映+DeepSeek+即梦:短视频制作》待定
人工智能·音视频
山河君18 小时前
从后验到先验:语音信噪比估计与DD算法详解
算法·音视频·语音识别·信号处理