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);
        },
      }
    },
  });
相关推荐
youandyouyou20 分钟前
医学远程示教同屏直播的技术实现路径:以连通宝双流方案为例
音视频·网络通信
A13345551 小时前
保姆级教程:视频播放器怎么导入SRT外挂字幕
音视频
揽秀亭长1 小时前
如何把提取一个视频的脚本?实测3种提取视频脚本的方法
音视频
开发笔记-阿牛1 小时前
嵌入式蓝牙开发:AC2005B 芯片技术解析 —— 省晶振设计、13dBm 射频与 Auracast 广播音响开发指南
人工智能·单片机·音视频
阿酷tony1 小时前
视频专栏列表的防录屏水印和跑马灯效果(也可网站调用)
java·前端·音视频
Black蜡笔小新2 小时前
运维提效!视频汇聚平台EasyCVR视频质量诊断,掉线花屏自动预警
运维·安全·音视频
A hao2 小时前
LED视频处理器中帧率与刷新率的区别
大数据·图像处理·人工智能·音视频
音视频牛哥4 小时前
从视频接入到灵活转推:SmartMediaKit 跨平台 RTSP 转RTMP 技术解析
人工智能·音视频·rtsp转rtmp·跨平台音视频sdk·边缘视频网关·多路视频转发·多路rtsp流转rtmp推送
NIKITAshao5 小时前
Unity内如何播放视频
音视频
世岩清上5 小时前
展厅不同分区播放差异化视频,怎样做到内容串联不割裂整体叙事?
运维·人工智能·音视频·展厅改造