精华内容
下载资源
问答
  • blob视频地址
    千次阅读
    2021-09-23 15:10:17

     阿酷TONY / 原创 /2021-9-23

    • blob类型视频调用,并不太适合用于纯mp4类视频文件;
    • blob视频比较适合调用m3u8类分片索引视频。

    Blob
    Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。 

    Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

    要从其他非blob对象和数据构造一个 Blob,请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob,请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 File 文档。

    接受 Blob 对象的API也被列在 File 文档中。

    注意:slice() 方法原本接受 length 作为第二个参数,以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小,则返回从开始到结尾的所有数据。
    注意:slice() 方法在某些浏览器和版本上带有浏览器引擎前缀:比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。 没有浏览器引擎前缀的老版本 slice() 方法有不同的语义,并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。

    构造函数
    Blob(blobParts[, options])
    返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
    属性
    Blob.size 只读
    Blob 对象中所包含数据的大小(字节)。
    Blob.type 只读
    一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。
    方法
    Blob.slice([start[, end[, contentType]]])
    返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。
    Blob.stream()
    返回一个能读取blob内容的 ReadableStream。
    Blob.text()
    返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
    Blob.arrayBuffer()
    返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer 

    var video = document.getElementById("my-video");
    
            window.URL = window.URL || window.webkitURL; //用来判断电脑系统window.webkitURL和window.URL是一样的,window.URL标准定义,window.webkitURL是webkit内核的实现,一般手机上就是使用这个,还有火狐等浏览器的实现。
            var xhr = new XMLHttpRequest();  // 实现数据请求 进行http协议的通信
            var play_url = "test.mp4" //网上的视频地址
            **注意,大部分视频地址都有跨域问题,在服务器上应设置好跨域的问题方便前端请求使用**
            xhr.open("GET", play_url, true);  //打开一个地址,请求类型 地址 异步或同步 
            xhr.responseType = "blob";  // 设置返回值 为blob对象    
            xhr.onload = function (e) { //请求后要执行的函数
                if (this.status == 200) { //成功 
                    var blob = this.response;  // 请求成功获取的参数 赋值给 “blob”
                    console.log(blob);
                    video.src = window.URL.createObjectURL(blob); //创建一个对象 视频只需要获取一次, 获取一次后,就需要释放这个对象。
                    // video.onload = function () { //获取到video 后执行的函数 ?
                        // window.URL.revokeObjectURL(video.src); //释放这个对象
                    // };
                }
            }
            xhr.send(); //发送请求
    

     

      blob加密视频源地址截图 1

     blob加密视频源地址截图 2

     [ 视频安全 ] 相关原创文章

    [ 视频直播 ] 相关原创文章

    [ 视频存储与应用 ] 相关原创文章

    [ 视频播放器 ] 相关文章

    [ WebRTC ] 相关文章

    [ 谷歌浏览器 ] 相关文章

    [ 微信公众号运营 ] 相关文章

    更多相关内容
  • <video id=my-video class=video-js playsinline controls preload=auto controlslist=nodownload controlslist=nofullscreen width=100% height=240 poster=upload/moviepic/2019-08-02/1564739500xyzp.png ...
  • 支持使用VideoJs播放MP4视频,并且通过blob加密视频地址,避免直接暴露视频URL,防盗链
  • 主要介绍了深入解析HTML5中的Blob对象的使用,是HTML5入门学习中的基础知识,需要的朋友可以参考下
  • STEP1:在一些视频播放网站视频下方没有直接的下载按钮,此时可以先用电脑F12键查看元素,会出现类似如下界面: STEP2:该界面左上角的位置有一个指针形状的按钮: ...该地址blob开头的,比较特殊,对应的是m3u8

    STEP1:在一些视频播放网站视频下方没有直接的下载按钮,此时可以先用电脑F12键查看元素,会出现类似如下界面:

    STEP2:该界面左上角的位置有一个指针形状的按钮:

    选用这个按钮,点一下网页里视频播放的区域,审查元素界面会跳转到类似如下的界面,并且有几行高亮代码,src=“”引号内部的地址如下:

    blob:https://www.dapengjiaoyu.cn/9d4e9b7d-f7bb-445c-9881-a35a7cf2dd5e

    该地址是blob开头的,比较特殊,对应的是m3u8格式的视频资源,需要找到该资源的真实地址,并且采用专用下载器下载。

    STEP3:在审查元素界面最上面,转到Network这一栏,可以看到下方有一个Filter搜索框,在搜索框内输入m3u8,并刷新该网页。

    STEP4:刷新网页后,选择搜索框下面的按钮,在下面表格的这一栏出现了一系列文件名,找到其中以.m3u8结尾的。

    STEP5:单击该文件后,这一栏里看到确实为.m3u8文件,因此拷贝这个网址:

    https://hls.videocc.net/ef4825bc7e/1/ef4825bc7ecfa741a15a119840828b01_1.m3u8?pid=1645255717678X1563830&device=desktop

     粘贴到下面这个下载器中下载即可。

    http://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.htmlhttp://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html=========================================================================

    常见问题和注意事项:

    1、在Filter框内搜索不到任何东西。原因:没有刷新网页,需要刷新后就会显示。

    2、粘贴m3u8文件链接到下载器进行下载时,出现如下提示。

           原因: Name栏下通常有不止一个m3u8链接,对于同一个资源,尝试下载另一个链接。

    3、对于一些视频网站,无需进行上述所有操作。在STEP2指针形状按钮的右侧有一个按钮,该按钮可以将网页模拟为移动端网页,一些网站在切换为移动端后,可以直接用正常链接下载。

    4、下载器下载的视频无法播放、黑屏、只有几秒钟声音。解决方法:如果需要在电脑上播放,请尝试恒星播放器或者用PR另存为MP4格式;在pad上或手机上,夸克浏览器可以正常播放。

    展开全文
  • 实战二:以Blob URL加载网络视频 现在我们有一个网络视频的地址,怎么能将这个视频地址变成Blob URL是形式呢,思路肯定是先要拿到存储这个视频原始数据的Blob对象,但是不同于input上传可以直接拿到File对象,我们...

    自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么通过referer设置防盗链,当我们拿到视频的地址后可以随意的下载或使用(每次放假回家,就会有亲戚找我帮忙从一些视频网站上下东西)。

    目前的云存储服务商大部分都支持referer防盗链。其原理就是在访问资源时,请求头会带上发起请求的页面地址,判断其不存在(表示直接访问图片地址)或不在白名单内,即为盗链。

    可是从某个时间开始我们打开调试工具去看各大视频网站的视频src会发现,它们统统变成了这样的形式。
    在这里插入图片描述
    拿b站的一个视频来看,红框中的视频地址,这个blob是个什么东西?。

    其实这个Blob URL也不是什么新技术,国内外出来都有一阵子了,但是网上的相关的文章不多也不是很详细,今天就和大家一起分享学习一下。

    Blob和ArrayBuffer

    最早是数据库直接用Blob来存储二进制数据对象,这样就不用关注存储数据的格式了。在web领域,Blob对象表示一个只读原始数据的类文件对象,虽然是二进制原始数据但是类似文件的对象,因此可以像操作文件对象一样操作Blob对象。

    ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。我们可以通过new ArrayBuffer(length)来获得一片连续的内存空间,它不能直接读写,但可根据需要将其传递到TypedArray视图或 DataView 对象来解释原始缓冲区。实际上视图只是给你提供了一个某种类型的读写接口,让你可以操作ArrayBuffer里的数据。TypedArray需指定一个数组类型来保证数组成员都是同一个数据类型,而DataView数组成员可以是不同的数据类型。

    TypedArray视图的类型数组对象有以下几个:

    • Int8Array:8位有符号整数,长度1个字节。
    • Uint8Array:8位无符号整数,长度1个字节。
    • Uint8ClampedArray:8位无符号整数,长度1个字节,溢出处理不同。
    • Int16Array:16位有符号整数,长度2个字节。
    • Uint16Array:16位无符号整数,长度2个字节。
    • Int32Array:32位有符号整数,长度4个字节。
    • Uint32Array:32位无符号整数,长度4个字节。
    • Float32Array:32位浮点数,长度4个字节。
    • Float64Array:64位浮点数,长度8个字节。

    Blob与ArrayBuffer的区别是,除了原始字节以外它还提供了mime type作为元数据,Blob和ArrayBuffer之间可以进行转换。

    File对象其实继承自Blob对象,并提供了提供了name , lastModifiedDate, size ,type 等基础元数据。

    创建Blob对象并转换成ArrayBuffer:

    //创建一个以二进制数据存储的html文件
    const text = "<div>hello world</div>";
    const blob = new Blob([text], { type: "text/html" }); // Blob {size: 22, type: "text/html"}
    //以文本读取
    const textReader = new FileReader();
    textReader.readAsText(blob);
    textReader.onload = function() {
      console.log(textReader.result); // <div>hello world</div>
    };
    //以ArrayBuffer形式读取
    const bufReader = new FileReader();
    bufReader.readAsArrayBuffer(blob);
    bufReader.onload = function() {
      console.log(new Uint8Array(bufReader.result)); // Uint8Array(22) [60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62]
    };
    
       

    创建一个相同数据的ArrayBuffer,并转换成Blob:

    //我们直接创建一个Uint8Array并填入上面的数据
    const u8Buf = new Uint8Array([60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62]);
    const u8Blob = new Blob([u8Buf], { type: "text/html" }); // Blob {size: 22, type: "text/html"}
    const textReader = new FileReader();
    

    textReader.readAsText(u8Blob);
    textReader.onload = function() {
    console.log(textReader.result); // 同样得到div>hello world</div>
    };

    更多Blob和ArrayBuffer的相关内容可以参看下面的资料:

    URL.createObjectURL

    video标签,audio标签还是img标签的src属性,不管是相对路径,绝对路径,或者一个网络地址,归根结底都是指向一个文件资源的地址。既然我们知道了Blob其实是一个可以当作文件用的二进制数据,那么只要我们可以生成一个指向Blob的地址,是不是就可以用在这些标签的src属性上,答案肯定是可以的,这里我们要用到的就是URL.createObjectURL()。

    const objectURL = URL.createObjectURL(object); //blob:http://localhost:1234/abcedfgh-1234-1234-1234-abcdefghijkl
    
     
    • 1

    这里的object参数是用于创建URL的File对象、Blob 对象或者 MediaSource 对象,生成的链接就是以blob:开头的一段地址,表示指向的是一个二进制数据。
    其中localhost:1234是当前网页的主机名称和端口号,也就是location.host,而且这个Blob URL是可以直接访问的。需要注意的是,即使是同样的二进制数据,每调用一次URL.createObjectURL方法,就会得到一个不一样的Blob URL。这个URL的存在时间,等同于网页的存在时间,一旦网页刷新或卸载,这个Blob URL就失效。
    通过URL.revokeObjectURL(objectURL) 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了,允许平台在合适的时机进行垃圾收集。

    如果是以文件协议打开的html文件(即url为file://开头),则地址中http://localhost:1234会变成null,而且此时这个Blob URL是无法直接访问的。

    实战一:上传图片预览

    html

    <input id="upload" type="file" />
    <img id="preview" src="" alt="预览"/>
    

    javascript

    const upload = document.querySelector("#upload");
    const preview = document.querySelector("#preview");
    

    upload.onchange = function() {
    const file = upload.files[0]; //File对象
    const src = URL.createObjectURL(file);
    preview.src = src;
    };

    这样一个图片上传预览就实现了,同样这个方法也适用于上传视频的预览。

    实战二:以Blob URL加载网络视频

    现在我们有一个网络视频的地址,怎么能将这个视频地址变成Blob URL是形式呢,思路肯定是先要拿到存储这个视频原始数据的Blob对象,但是不同于input上传可以直接拿到File对象,我们只有一个网络地址。

    我们知道平时请求接口我们可以使用xhr(jquery里的ajax和axios就是封装的这个)或fetch,请求一个服务端地址可以返回我们相应的数据,那如果我们用xhr或者fetch去请求一个图片或视频地址会返回什么呢?当然是返回图片和视频的数据,只不过要设置正确responseType才能拿到我们想要的格式数据。

    function ajax(url, cb) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.responseType = "blob"; // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象
      xhr.onload = function() {
        cb(xhr.response);
      };
      xhr.send();
    }
    

    注意XMLHttpRequest和Fetch API请求会有跨域问题,可以通过跨域资源共享(CORS)解决。

    看到responseType可以设置blob和arraybuffer我们应该就有谱了,请求返回一个Blob对象,或者返回ArrayBuffer对象转换成Blob对象,然后通过createObjectURL生成地址赋值给视频的src属性就可以了,这里我们直接请求一个Blob对象。

    ajax('video.mp4', function(res){
        const src = URL.createObjectURL(res); 
        video.src = src;
    })
    

    用调试工具查看视频标签的src属性已经变成一个Blob URL,表面上看起来是不是和各大视频网站形式一致了,但是考虑一个问题,这种形式要等到请求完全部视频数据才能播放,小视频还好说,要是视频资源大一点岂不爆炸,显然各大视频网站不可能这么干。

    解决这个问题的方法就是流媒体,其带给我们最直观体验就是使媒体文件可以边下边播(像我这样的90后男性最早体会到流媒体好处的应该是源于那款快子头的播放器),web端如果要使用流媒体,有多个流媒体协议可以供我们选择。

    HLS和MPEG DASH

    HLS (HTTP Live Streaming), 是由 Apple 公司实现的基于 HTTP 的媒体流传输协议。HLS以ts为传输格式,m3u8为索引文件(文件中包含了所要用到的ts文件名称,时长等信息,可以用播放器播放,也可以用vscode之类的编辑器打开查看),在移动端大部分浏览器都支持,也就是说你可以用video标签直接加载一个m3u8文件播放视频或者直播,但是在pc端,除了苹果的Safari,需要引入库来支持。

    用到此方案的视频网站比如优酷,可以在视频播放时通过调试查看Network里的xhr请求,会发现一个m3u8文件,和每隔一段时间请求几个ts文件。
    在这里插入图片描述
    在这里插入图片描述
    但是除了HLS,还有Adobe的HDS,微软的MSS,方案一多就要有个标准点的东西,于是就有了MPEG DASH。

    DASH(Dynamic Adaptive Streaming over HTTP) ,是一种在互联网上传送动态码率的Video Streaming技术,类似于苹果的HLS,DASH会通过media presentation description (MPD)将视频内容切片成一个很短的文件片段,每个切片都有多个不同的码率,DASH Client可以根据网络的情况选择一个码率进行播放,支持在不同码率之间无缝切换。

    Youtube,B站都是用的这个方案。这个方案索引文件通常是mpd文件(类似HLS的m3u8文件功能),传输格式推荐的是fmp4(Fragmented MP4),文件扩展名通常为.m4s或直接用.mp4。所以用调试查看b站视频播放时的网络请求,会发现每隔一段时间有几个m4s文件请求。

    在这里插入图片描述
    不管是HLS还是DASH们,都有对应的库甚至是高级的播放器方便我们使用,但我们其实是想要学习一点实现。其实抛开掉索引文件的解析拿到实际媒体文件的传输地址,摆在我们面前的只有一个如何将多个视频数据合并让video标签可以无缝播放。

    与之相关的一篇B站文章推荐给感兴趣的朋友:我们为什么使用DASH

    MediaSource

    video标签src指向一个视频地址,视频播完了再将src修改为下一段的视频地址然后播放,这显然不符合我们无缝播放的要求。其实有了我们前面Blob URL的学习,我们可能就会想到一个思路,用Blob URL指向一个视频二进制数据,然后不断将下一段视频的二进制数据添加拼接进去。这样就可以在不影响播放的情况下,不断的更新视频内容并播放下去,想想是不是有点流的意思出来了。

    要实现这个功能我们要通过MediaSource来实现,MediaSource接口功能也很纯粹,作为一个媒体数据容器可以和HTMLMediaElement进行绑定。基本流程就是通过URL.createObjectURL创建容器的BLob URL,设置到video标签的src上,在播放过程中,我们仍然可以通过MediaSource.appendBuffer方法往容器里添加数据,达到更新视频内容的目的。

    实现代码如下:

    const video = document.querySelector('video');
    //视频资源存放路径,假设下面有5个分段视频 video1.mp4 ~ video5.mp4,第一个段为初始化视频init.mp4
    const assetURL = "http://www.demo.com";
    //视频格式和编码信息,主要为判断浏览器是否支持视频格式,但如果信息和视频不符可能会报错
    const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; 
    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
      const mediaSource = new MediaSource();
      video.src = URL.createObjectURL(mediaSource); //将video与MediaSource绑定,此处生成一个Blob URL
      mediaSource.addEventListener('sourceopen', sourceOpen); //可以理解为容器打开
    } else {
      //浏览器不支持该视频格式
      console.error('Unsupported MIME type or codec: ', mimeCodec);
    }
    

    function sourceOpen () {
    const mediaSource = this;
    const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    let i = 1;
    function getNextVideo(url) {
    //ajax代码实现翻看上文,数据请求类型为arraybuffer
    ajax(url, function(buf) {
    //往容器中添加请求到的数据,不会影响当下的视频播放。
    sourceBuffer.appendBuffer(buf);
    });
    }
    //每次appendBuffer数据更新完之后就会触发
    sourceBuffer.addEventListener(“updateend”, function() {
    if (i = 1) {
    //第一个初始化视频加载完就开始播放
    video.play();
    }
    if (i < 6) {
    //一段视频加载完成后,请求下一段视频
    getNextVideo(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>assetURL<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/video</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.mp4);
    }
    if (i = 6) {
    //全部视频片段加载完关闭容器
    mediaSource.endOfStream();
    URL.revokeObjectURL(video.src); //Blob URL已经使用并加载,不需要再次使用的话可以释放掉。
    }
    i++;
    });
    //加载初始视频
    getNextVideo(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>assetURL<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/init.mp4);
    };

    这段代码修改自MDN的MediaSource词条中的示例代码,原例子中只有加载一段视频,我修改为了多段视频,代码里面很多地方还可以优化精简,这里没做就当是为了方便我们看逻辑。

    此时我们已经基本实现了一个简易的流媒体播放功能,如果愿意可以再加入m3u8或mpd文件的解析,设计一下UI界面,就可以实现一个流媒体播放器了。

    最后提一下一个坑,很多人跑了MDN的MediaSource示例代码,可能会发现使用官方提供的视频是没问题的,但是用了自己的mp4视频就会报错,这是因为fmp4文件扩展名通常为.m4s或直接用.mp4,但却是特殊的mp4文件。

    Fragmented MP4

    通常我们使用的mp4文件是嵌套结构的,客户端必须要从头加载一个 MP4 文件,才能够完整播放,不能从中间一段开始播放。而Fragmented MP4(简称fmp4),就如它的名字碎片mp4,是由一系列的片段组成,如果服务器支持 byte-range 请求,那么,这些片段可以独立的进行请求到客户端进行播放,而不需要加载整个文件。

    我们可以通过这个网站判断一个mp4文件是否为Fragmented MP4,网站地址

    我们通过FFmpegBento4的mp4fragment来将普通mp4转换为Fragmented MP4,两个工具都是命令行工具,按照各自系统下载下来对应的压缩包,解压后设置环境变量指向文件夹中的bin目录,就可以使用相关命令了。

    Bento4的mp4fragment,没有太多参数,命令如下:

    mp4fragment video.mp4 video-fragmented.mp4
    
     
    • 1

    FFmpeg会需要设置一些参数,命令如下:

    ffmpeg -i video.mp4 -movflags empty_moov+default_base_moof+frag_keyframe video-fragmented.mp4
    
     
    • 1

    Tips:网上大部分的资料中转换时是不带default_base_moof这个参数的,虽然可以转换成功,但是经测试如果不添加此参数网页中MediaSource处理视频时会报错。

    视频的切割分段可以使用Bento4的mp4slipt,命令如下:

    mp4split video.mp4 --media-segment video-%llu.mp4 --pattern-parameters N
    
     
    • 1

    最后

    之所以写这篇文章其实是之前公司有个需求要了解一下Blob URL,稍微看了一下,后来不了了之。这次忙里偷闲重拾起来把它搞清楚,一边学习一边记录,这篇文章中的很多点展开了其实有很多内容,希望大家看了这篇文章能够有所启发或引起兴趣,我的目的也就达到了,另外视频这方面的东西真的是有点深的,文章中如果有错误和疏漏也欢迎大家指出,我将及时修正。

    文章备份仓库:GITHUB地址

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 解析下载blob视频

    万次阅读 2019-10-01 16:43:44
    浏览器中有些视频是通过blob:https://baike.baidu.com/bf834217-9442-4c98-9ef6-0bd5f3408a4e的形式给出的。blob后面的网址不能直接访问。 比如百度百科搜索中的视频:离子液体 这篇博客教你如何下载此类视频。 ...

    前言

    浏览器中有些视频是通过blob:https://baike.baidu.com/bf834217-9442-4c98-9ef6-0bd5f3408a4e的形式给出的。blob后面的网址不能直接访问。
    比如百度百科搜索中的视频:离子液体

    这篇博客教你如何下载此类视频。

    环境

    • 360浏览器

    没有安装360浏览器的就麻烦安装一下吧^_^

    安装插件Flash Video Downloader

    点击右上角的扩展中心

    搜索Flash Video Downloader
    点击安装

    下载视频

    播放视频,点击插件,根据需要选择下载。


    展开全文
  • 小小技巧--BLOB视频加密

    千次阅读 2020-11-08 18:55:07
    bolb视频加密
  • 为什么视频网站的视频链接地址blob

    万次阅读 多人点赞 2019-07-06 17:15:49
    由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么通过referer设置防盗链,当我们拿到视频地址后可以随意的下载或使用(每次放假回家,就会有亲戚找我帮忙从一些视频网站上下东西)。 目前的云存储...
  • 视频地址blob加密

    千次阅读 2019-06-05 10:56:00
    xhr.onload = function() { if (this.status == 200) { var blob = this.response; video.onload = function(e) { window.URL.revokeObjectURL(video.src); }; video.src = window.URL.createObjectURL(blob); } } ...
  • 这个blob开头的音视频文件,其实那都是欺骗你的,刚好我这刚做了一个流媒体方面的项目,就说一下我的理解。首先在源码中,video标签的src要么是空的 要么就没有src这个属性,为什么在审查元素能看到?其实blob:http他...
  • Blob开头视频链接如何下载

    万次阅读 多人点赞 2020-02-22 09:33:08
    ** Blob开头视频链接如何下载 ** 1.打开谷歌浏览器 找到需要下载...2.于是乎,我又开始奇思妙想,点击复制视频地址看看,结果是这鬼样。 这个blob是个什么鬼?删了看看! 这又是何方妖孽? 3.自行百度了一下blo...
  • 目标下载视频地址blob:http://www.yunxiedu.net/2be908de-216b-4b57-badb-1d3be699e077 如下图视频还是弹窗网页视频: (1)安装插件浏览器插件:HDS / HLS Video Downloader 下载地址:...
  • blob 视频加密

    2021-04-26 11:56:03
    盗版是对创作者的屠杀。在国内,很多人都用过盗版软件,这点并没有什么,...但是,我最常用的是node,今天,就用它分享一个blob视频播放。安装需要安装的模块有koa,koa异步非常好用。koa-router作为路由,koa-s...
  • Blob

    2019-10-25 02:43:47
    Blob
  • Html5视频video标签中调用blob地址,实现视频安全
  • 记一次破解blob加密视频网站的过程

    万次阅读 热门讨论 2019-01-17 17:20:36
    现在很多主流的视频网站几乎都是用到了blob的加密(其实也不算是加密),效果是隐藏了视频源的地址,其背后的本质还是通过一段执行一段js拿到视频的切片文件,然后进行拼接播放。就像下面这样的 其实对于普通情况...
  • 扒取blob:https:// 格式的视频

    千次阅读 2022-03-02 15:43:37
    然后自己写过这种网页上可以观看视频的项目,用的是vue-video-player -S插件,视频下载地址会放在sources配置里面,这种情况下直接右键检查在sources里面源代码扒到地址,就可以自己下载了 blob:https://格式的视频...
  • 详解并探究blob:http:// 视频格式流

    千次阅读 2020-11-07 22:15:52
    复制了一个m3u8文件,在线解析了一下,如图: ...video class="dplayer-video dplayer-video-current" webkit-playsinline="" x-webkit-airplay="allow" playsinline="" preload="metadata" src="blob:...
  • 视频播放的blob小问题

    2018-11-02 11:24:36
    网上查了一大堆资料,其实想实现for循环读取本地视频路径,然后关闭输出流,在js里面,通过xhr.response获得blob对象,但是只有第一个视频加载进去,其余的没有了,相当于说我要接受的是blob对象数组,然后一个个的...
  • 由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么通过referer设置防盗链,当我们拿到视频地址后可以随意的下载或使用(每次放假回家,就会有亲戚找我帮忙从一些视频网站上下东西)。目前的云存储服务商...
  • 1.5倍播放) 去掉h5播放器中voide标签中的下载按钮 blob用法实例:http地址的原理及生成方法 如何禁止视频在手机移动端页面中全屏播放 [ WebRTC ] 相关文章 企业级无延时直播来了,用了就回不去了(webRTC) rtmp直播...
  • Dplayer Blob视频播放地址加密

    千次阅读 2020-06-21 14:37:43
    DPlayer 播放 blob 加密过的视频普通Mp4格式的视频Java后台将视频以文件流的形式传给前端前端使用JavaScript将视频文件接收并转为Blob对象使用Dplayer播放器将Blob和使用Dplayer播放视频进行整合使用Blob加密.m3u8...
  • 前段实现 <div> <video id="video_player" width="660" height="364" controls="controls"></video> </div>... //配置请求方式、请求地址以及是否同步 xhr.open('POST...
  • 查看源代码,可看到现在B站的视频地址经过blob处理,而且在去掉blob之后,也是没有办法访问的,不能直接下载,那就只能去分析请求了 发现网页发送了这样一个请求,我们都知道B站的视频格式是 .flv的,仔细看一下这...
  • 下载 blob视频, 如何下载网站中的blob:https:// 视频

    万次阅读 多人点赞 2020-10-17 08:50:49
    下载 blob视频, 如何下载网站中的blob:https:// 视频 2,步骤 2.1,打开控制台 在NetWork这一栏,对请求进行通过关键词.m3u8进行过滤,过滤的结果中,某一个请求的url是以.m3u8结束的, 现在就从下载 Blo...
  • 视频实现blob加密

    2021-04-17 11:46:29
    腾讯云主要是对视频进行了blob加密,然后利用腾讯的超级播放器进行播放,加密后的视频路径变为:blob:https://console.cloud.tencent.com/6808765f-af9c-4940-96fe-60a607cb242d, 媒资处理会产生费用,由腾讯云...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,063
精华内容 5,225
关键字:

blob视频地址