blob类型url的视频下载问题

blob下载问题的详细描述

我想用src url blob:https%3A//www.youtube.com/23aea5c8-9ae2-40dc-9417-e675ea99b386下载视频,但是不知道应该怎么做。

有没有下载这类视频的通用方法?

推荐的解决方法

我在Vimeo中找到了一个使用blob url下载视频的方法(读了这篇文章,我才知道做法)。我正在使用Google Chrome,具体步骤如下:

  1. 打开More Tools(更多工具)→Developer Tools(开发工具)

  2. 检查视频标签中是否有这样的东西:

    <video preload="" src="blob:https://player.vimeo.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></video>
    
  3. 复制iframe标签的src(如果有的话)值,如http://player.vimeo.com/video/XYZ,如果你发现它可以复制,直接跳到第7点,否则按照步骤4,5,6继续操作。

  4. 现在在页面中找到这个字符串https://skyfire.vimeocdn.com/.../master.json?base64_init=1(使用开发视图(Developer View)),应该可以在javascript函数中找到它,像这样:

    (function(e,a){var t={"cdn_url":"https://f.vimeocdn.com","view":1,"request":{"files":{"dash":{"origin":"gcs","url":"https://48skyfiregce-a.akamaihd.net/.../master.json?base64_init=1","cdn":"
    
  5. 复制上面的url字段中的链接到一个新的Chrome选项卡,例如https://48skyfiregce-a.akamaihd.net/.../master.json?base64_init=1,然后使用浏览器打开它,它会打开一个像这样的json文件:

    {
        "clip_id": XYZ,
        "base_url": "../",
        "video": [
                     { ... ... ...
    
  6. 现在用id XYZ组合构造一个URL,如下所示:https://player.vimeo.com/video/XYZ

  7. 用最终的URL替换视频标签内的blob:https://player.vimeo.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX(在上一步#6中创建的)。

  8. 现在可以发现,魔术般地,视频标签内的src字段已更改(如果没有,请尝试第7步多次)...

    <video preload="none" src="https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/XX/XXX/X/XXXXXXXX/XXXXXXXXX.mp4?token=abcdefg"></video>
    
  9. 最后,使用新的链接直接下载它,就像这样:https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/XX/XXX/X/XXXXXXXX/XXXXXXXXX.mp4?token=abcdefg

其他的解决思路

这个答案是针对Twitter网址的 -

  1. 右键点击视频,然后点击检查元素 -

你会发现这样的代码

<div id="playerContainer" class="player-container full-screen-enabled" data-config="{&quot;is_360&quot;:false,&quot;duration&quot;:28617,&quot;scribe_widget_origin&quot;:true,&quot;heartbeatEnabled&quot;:true,&quot;video_url&quot;:&quot;https:\/\/video.twimg.com\/ext_tw_video\/844504104512749568\/pu\/pl\/e91Du5N2TZ09ZaW_.m3u8&quot;,&quot;disable_embed&quot;:&quot;0&quot;,&quot;videoInfo&quot;:{&quot;title&quot;:null,&quot;description&quot;:null,&quot;publisher&quot;:{&quot;screen_name&quot;:&quot;MountainButorac&quot;,&quot;name&quot;:&quot;Mountain Butorac&quot;,&quot;profile_image_url&quot;:&quot;https:\/\/pbs.twimg.com\/profile_images\/808318456701521920\/vBvlAASx_normal.jpg&quot;}},&quot;cardUrl&quot;:&quot;https:\/\/t.co\/SdSorop3uN&quot;,&quot;content_type&quot;:&quot;application\/x-mpegURL&quot;,&quot;owner_id&quot;:&quot;14120461&quot;,&quot;looping_enabled&quot;:true,&quot;show_cookie_override_en&quot;:true,&quot;visit_cta_url&quot;:null,&quot;scribe_playlist_url&quot;:&quot;https:\/\/twitter.com\/MountainButorac\/status\/844505243538931714\/video\/1&quot;,&quot;source_type&quot;:&quot;consumer&quot;,&quot;image_src&quot;:&quot;https:\/\/pbs.twimg.com\/ext_tw_video_thumb\/844504104512749568\/pu\/img\/FFt3qkbeOh0RlGfZ.jpg&quot;,&quot;heartbeatIntervalInMs&quot;:5000.0,&quot;use_tfw_live_heartbeat_event_category&quot;:true,&quot;video_loading_timeout&quot;:45000.0,&quot;status&quot;:{&quot;created_at&quot;:&quot;Wed Mar 22 11:05:14 +0000 2017&quot;,&quot;id&quot;:844505243538931714,&quot;id_str&quot;:&quot;844505243538931714&quot;,&quot;text&quot;:&quot;Took my Goddaughter to meet the pope. She stole his hat! https:\/\/t.co\/SdSorop3uN&quot;,&quot;truncated&quot;:false,&quot;entities&quot;:{&quot;hashtags&quot;:[],&quot;symbols&quot;:[],&quot;user_mentions&quot;:[],&quot;urls&quot;:[],&quot;media&quot;:[{&quot;id&quot;:844504104512749568,&quot;id_str&quot;:&quot;844504104512749568&quot;,&quot;indices&quot;:[57,80],&quot;media_url&quot;:&quot;http:\/\/pbs.twimg.com\/ext_tw_video_thumb\/844504104512749568\/pu\/img\/FFt3qkbeOh0RlGfZ.jpg&quot;,&quot;media_url_https&quot;:&quot;https:\/\/pbs.twimg.com\/ext_tw_video_thumb\/844504104512749568\/pu\/img\/FFt3qkbeOh0RlGfZ.jpg&quot;,&quot;url&quot;:&quot;https:\/\/t.co\/SdSorop3uN&quot;,&quot;display_url&quot;:&quot;pic.twitter.com\/SdSorop3uN&quot;,&quot;expanded_url&quot;:&quot;https:\/\/twitter.com\/MountainButorac\/status\/844505243538931714\/video\/1&quot;,&quot;type&quot;:&quot;photo&quot;,&quot;sizes&quot;:{&quot;small&quot;:{&quot;w&quot;:340,&quot;h&quot;:604,&quot;resize&quot;:&quot;fit&quot;},&quot;thumb&quot;:{&quot;w&quot;:150,&quot;h&quot;:150,&quot;resize&quot;:&quot;crop&quot;},&quot;large&quot;:{&quot;w&quot;:576,&quot;h&quot;:1024,&quot;resize&quot;:&quot;fit&quot;},&quot;medium&quot;:{&quot;w&quot;:576,&quot;h&quot;:1024,&quot;resize&quot;:&quot;fit&quot;}}}]},&quot;source&quot;:&quot;\u003ca href=\&quot;http:\/\/twitter.com\/download\/iphone\&quot; rel=\&quot;nofollow\&quot;\u003eTwitter for iPhone\u003c\/a\u003e&quot;,&quot;in_reply_to_status_id&quot;:null,&quot;in_reply_to_status_id_str&quot;:null,&quot;in_reply_to_user_id&quot;:null,&quot;in_reply_to_user_id_str&quot;:null,&quot;in_reply_to_screen_name&quot;:null,&quot;geo&quot;:null,&quot;coordinates&quot;:null,&quot;place&quot;:null,&quot;contributors&quot;:null,&quot;retweet_count&quot;:0,&quot;favorite_count&quot;:0,&quot;favorited&quot;:false,&quot;retweeted&quot;:false,&quot;possibly_sensitive&quot;:false,&quot;lang&quot;:&quot;en&quot;},&quot;show_cookie_override_all&quot;:true,&quot;video_session_enabled&quot;:false,&quot;media_id&quot;:&quot;844504104512749568&quot;,&quot;view_counts&quot;:null,&quot;statusTimestamp&quot;:{&quot;local&quot;:&quot;4:05 AM - 22 Mar 2017&quot;},&quot;media_type&quot;:1,&quot;user&quot;:{&quot;screen_name&quot;:&quot;MountainButorac&quot;,&quot;name&quot;:&quot;Mountain Butorac&quot;,&quot;profile_image_url&quot;:&quot;https:\/\/pbs.twimg.com\/profile_images\/808318456701521920\/vBvlAASx_bigger.jpg&quot;},&quot;watch_now_cta_url&quot;:null,&quot;tweet_id&quot;:&quot;844505243538931714&quot;}" data-source-type="consumer">

复制上面的代码,并粘贴到记事本++(Notepad++)中,然后用"替换所有的&quot;,用/替换所有和\/。 (使用CTRL + H)

你会得到如下的内容

{
    "is_360": false,
    "duration": 28617,
    "scribe_widget_origin": true,
    "heartbeatEnabled": true,
    "video_url": "https://video.twimg.com/ext_tw_video/844504104512749568/pu/pl/e91Du5N2TZ09ZaW_.m3u8",

    "disable_embed": "0",
    "videoInfo": {
        "title": null,
        "description": null,
        "publisher": {
            "screen_name": "MountainButorac",
            "name": "Mountain Butorac",
            "profile_image_url": "https://pbs.twimg.com/profile_images/808318456701521920/vBvlAASx_normal.jpg"
        }
    },
    "cardUrl": "https://t.co/SdSorop3uN",
    "content_type": "application/x-mpegURL",
    "owner_id": "14120461",
    "looping_enabled": true,
    "show_cookie_override_en": true,
    "visit_cta_url": null,
    "scribe_playlist_url": "https://twitter.com/MountainButorac/status/844505243538931714/video/1",
    "source_type": "consumer",
    "image_src": "https://pbs.twimg.com/ext_tw_video_thumb/844504104512749568/pu/img/FFt3qkbeOh0RlGfZ.jpg",
    "heartbeatIntervalInMs": 5000.0,
    "use_tfw_live_heartbeat_event_category": true,
    "video_loading_timeout": 45000.0,
    "status": {
        "created_at": "Wed Mar 22 11:05:14 +0000 2017",
        "id": 844505243538931714,
        "id_str": "844505243538931714",
        "text": "Took my Goddaughter to meet the pope. She stole his hat! https://t.co/SdSorop3uN",
        "truncated": false,
        "entities": {
            "hashtags": [],
            "symbols": [],
            "user_mentions": [],
            "urls": [],
            "media": [{
                "id": 844504104512749568,
                "id_str": "844504104512749568",
                "indices": [57, 80],
                "media_url": "http://pbs.twimg.com/ext_tw_video_thumb/844504104512749568/pu/img/FFt3qkbeOh0RlGfZ.jpg",
                "media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/844504104512749568/pu/img/FFt3qkbeOh0RlGfZ.jpg",
                "url": "https://t.co/SdSorop3uN",
                "display_url": "pic.twitter.com/SdSorop3uN",
                "expanded_url": "https://twitter.com/MountainButorac/status/844505243538931714/video/1",
                "type": "photo",
                "sizes": {
                    "small": {
                        "w": 340,
                        "h": 604,
                        "resize": "fit"
                    },
                    "thumb": {
                        "w": 150,
                        "h": 150,
                        "resize": "crop"
                    },
                    "large": {
                        "w": 576,
                        "h": 1024,
                        "resize": "fit"
                    },
                    "medium": {
                        "w": 576,
                        "h": 1024,
                        "resize": "fit"
                    }
                }
            }]
        },
        "source": "\u003ca href=\"http://twitter.com/download/iphone\" rel=\"nofollow\"\u003eTwitter for iPhone\u003c/a\u003e",
        "in_reply_to_status_id": null,
        "in_reply_to_status_id_str": null,
        "in_reply_to_user_id": null,
        "in_reply_to_user_id_str": null,
        "in_reply_to_screen_name": null,
        "geo": null,
        "coordinates": null,
        "place": null,
        "contributors": null,
        "retweet_count": 0,
        "favorite_count": 0,
        "favorited": false,
        "retweeted": false,
        "possibly_sensitive": false,
        "lang": "en"
    },
    "show_cookie_override_all": true,
    "video_session_enabled": false,
    "media_id": "844504104512749568",
    "view_counts": null,
    "statusTimestamp": {
        "local": "4:05 AM - 22 Mar 2017"
    },
    "media_type": 1,
    "user": {
        "screen_name": "MountainButorac",
        "name": "Mountain Butorac",
        "profile_image_url": "https://pbs.twimg.com/profile_images/808318456701521920/vBvlAASx_bigger.jpg"
    },
    "watch_now_cta_url": null,
    "tweet_id": "844505243538931714"
}

从上面的JSON格式,可以看到video_url的值

https://video.twimg.com/ext_tw_video/844504104512749568/pu/pl/e91Du5N2TZ09ZaW_.m3u8

这里的问题是,在2016年8月1日之后,Twitter不再使用.mp4视频,而是转换为新的HLS,自适应流格式,带有.m3u8文件扩展名。

.m3u8文件基本上只是一个文本文的封装,它们非常小(300-500字节)。当您使用文本编辑器打开它们时,它们包含指向不同视频大小的链接

  1. 在记事本++(Notepad++)中打开文件m3u8,它会包含这样的代码

EXTM3U EXT-X-INDEPENDENT-SEGMENTS EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=256000,RESOLUTION=180x320,CODECS="mp4a.40.2,avc1.42001f"/ext_tw_video/844504104512749568/pu/pl/180x320/_Z42SY5zwMlLdFYx.m3u8 EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=832000,RESOLUTION=360x640,CODECS="mp4a.40.2,avc1.42001f"/ext_tw_video/844504104512749568/pu/pl/360x640/-Phfjbbx2yinirLi.m3u8

  1. 根据您需要的分辨率从上面复制对应的链接。重复相同的步骤,直到有.ts文件。下载.ts文件(视频文件)。

### 回答1: 在 JavaScript 中,可以使用 Blob 对象来处理二进制数据,并用于下载视频文件。 首先,使用 XMLHttpRequest 对象向服务器发送一个请求,获取视频文件的二进制数据。可以使用 responseType 属性将返回类型设置为 "blob"。 然后,将获取的 blob 对象转换成 URL,使用 createObjectURL 方法创建一个 URL 对象,该对象包含了视频文件的访问路径。接着,创建一个链接标签 (a 标签),将该标签的下载属性设置为文件名,同时将链接的 href 属性设置为该 URL 对象。 最后,触发该链接的点击事件,即可下载视频文件。以下是示例代码: ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'video.mp4'); xhr.responseType = 'blob'; xhr.onload = function () { var blob = xhr.response; var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'video.mp4'; a.click(); }; xhr.send(); ``` 需要注意的是,使用完 URL.createObjectURL 创建的 URL 对象后,需要使用 URL.revokeObjectURL 方法将其释放,以便释放对该二进制对象的引用。 ### 回答2: 在JavaScript中,要下载网页的Blob视频,可以按照以下步骤进行操作: 1. 首先,使用XMLHttpRequest或者Fetch API来获取视频Blob数据。 2. 创建一个URL对象,使用createObjectURL方法将Blob数据转换成可下载URL。 3. 创建一个隐藏的<a>标签元素,设置它的href属性为上一步创建的URL。 4. 设置<a>标签的download属性为视频的文件名,以便在下载时保留正确的文件名。 5. 使用JavaScript的click()方法触发<a>标签的点击事件,实现下载操作。 6. 最后,记得在下载完成后,使用revokeObjectURL()方法释放URL对象。 以下是一个示例代码: ```javascript function downloadVideo(url, filename) { // 使用XMLHttpRequest或者Fetch API获取视频Blob数据 fetch(url) .then(response => response.blob()) .then(blob => { // 创建URL对象 const videoURL = URL.createObjectURL(blob); // 创建隐藏的<a>标签元素 const downloadLink = document.createElement('a'); downloadLink.href = videoURL; downloadLink.download = filename; // 触发<a>标签的点击事件,实现下载 downloadLink.click(); // 释放URL对象 URL.revokeObjectURL(videoURL); }); } // 调用函数下载Blob视频 const videoUrl = 'http://example.com/video.mp4'; const videoFilename = 'video.mp4'; downloadVideo(videoUrl, videoFilename); ``` 这样,当调用downloadVideo函数时,就可以根据传入的视频URL和文件名下载Blob视频了。请注意,由于浏览器的安全性限制,可能无法下载来自其他域的视频。 ### 回答3: JS下载网页的Blob视频可以通过以下步骤实现: 1.首先,通过`fetch()`函数从服务器获取视频Blob数据。您需要提供视频URL作为fetch的参数。例如: ```javascript fetch('视频URL') .then(response => response.blob()) .then(blob => { // 下载blob视频 }); ``` 2.然后,您可以创建一个`<a>`标签并设置其下载属性,以便浏览器能够将Blob数据下载到本地。例如: ```javascript const a = document.createElement('a'); document.body.appendChild(a); a.style.display = 'none'; a.href = URL.createObjectURL(blob); a.download = '视频名称'; a.click(); URL.revokeObjectURL(a.href); ``` 在上面的代码中,我们创建了一个隐藏的`<a>`标签并设置了href属性为Blob URL。然后,我们设置了下载属性为视频的名称,最后通过`a.click()`触发下载。最后一行代码`URL.revokeObjectURL(a.href)`可以释放通过`URL.createObjectURL()`方法创建的URL。 请注意,这个方法必须在用户与网站进行交互(例如点击按钮)时才能正常工作,因为浏览器通常会阻止自动下载文件。因此,您可能需要将上述代码放置在某个事件处理函数中,以便在用户交互时执行下载操作。 以上是使用JavaScript下载网页中的Blob视频的简单示例。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值