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);
        },
      }
    },
  });
相关推荐
科技小E2 小时前
WebRTC实时音视频通话技术EasyRTC嵌入式音视频通信SDK,助力智慧物流打造实时高效的物流管理体系
人工智能·音视频
Icoolkj6 小时前
可灵 AI:开启 AI 视频创作新时代
人工智能·音视频
SuperW15 小时前
视频编码原理讲解一:VCL层和NAL层的讲解
音视频
Panesle1 天前
HunyuanCustom:文生视频框架论文速读
人工智能·算法·音视频·文生视频
程序员JerrySUN1 天前
驱动开发硬核特训 · Day 30(下篇): 深入解析 lm48100q I2C 音频编解码器驱动模型(基于 i.MX8MP)
linux·驱动开发·架构·音视频
读心悦2 天前
5000字总结 HTML5 中的音频和视频,关羽标签、属性、API 和最佳实践
前端·音视频·html5
东风西巷2 天前
BLURRR剪辑软件免费版:创意剪辑,轻松上手,打造个性视频
android·智能手机·音视频·生活·软件需求
weixin_446260852 天前
视觉革命来袭!ComfyUI-LTXVideo 让视频创作更高效
人工智能·音视频
拧螺丝专业户2 天前
外网访问内网海康威视监控视频的方案:WebRTC + Coturn 搭建
音视频·webrtc·监控视频
追随远方2 天前
Android平台FFmpeg音视频开发深度指南
android·ffmpeg·音视频