站長資訊網(wǎng)java基礎(chǔ)欄目介紹去水印工具的方法。
相關(guān)學(xué)習(xí)推薦：java基礎(chǔ)
百因必有果
說一下我為什么要做個抖音視頻去水印工具，其實是因為我的沙雕女友，她居然剛我~
有天晚上她在抖音看見一個非常具有 教育意義 的視頻，“男人疼媳婦就該承包全部家務(wù)活”，然后它就想把視頻下載下來，分享到她的姐妹群交流 馭夫 心得。
可是大家都知道抖音下載的視頻是帶水印，作為一個重度強迫癥選手這是不被允許的，沒辦法那就找找有沒有去水印工具吧，找了一圈要不就是收費，要么下載不下來，主上臉上的笑容也在逐漸消失。
我在邊上調(diào)侃了一句：也沒多難，要不我給你做一個！“你行嗎？” 然后投來了一個不屑的眼神。
哎呀！本來就開個玩笑，居然說我不行，這就不能忍了，我得證明給你看看！男人嘛，就受不了這話
先看下我做的去水印工具線上預(yù)覽效果： 47.93.6.5:8888/index
下邊和大家一起分析下做這個去水印工具的思路，很多人乍一聽 去水印 ，下意識的覺得是一種什么牛比的算法，其實這是一種假象~
刨根問底
雖說要爭口氣，可剛開始做的時候我也真是一臉懵逼，因為根本不知道該從哪入手，去水印什么原理啊？難不成我還要寫個算法？
找了一個抖音視頻的分享鏈接，一點點分析，不難發(fā)現(xiàn)這是個經(jīng)過處理的短鏈接，那這個短鏈接一定會重定向到真實的視頻地址 URL 。
https://v.douyin.com/JSkuhE4/
瀏覽器中輸入短鏈接得到了下邊這個 URL ，以我的經(jīng)驗判斷URL中的 6820792802394262795 很有可能是視頻的唯一ID，而唯一ID通常用來作為獲取詳情接口的入?yún)ⅲズ賬 好像有點頭緒了。
https://www.iesdouyin.com/share/video/6820792802394262795/
趕緊祭出 F12 大法打開控制臺，在眾多請求中發(fā)現(xiàn)這么一個接口，它居然用到了上邊的唯一ID。
https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/?item_ids=6820792802394262795
更驚喜的是接口返回的數(shù)據(jù)那叫一個詳細，作者信息、音頻地址、視頻地址、平面圖都有。但唯獨沒有無水印的視頻 URL。
只找到一個有水印的視頻 URL，有點小失落，我又看了看這個地址，發(fā)現(xiàn) wm 和我項目名有點像啊，不就是watermark 水印的縮寫嗎？
https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200f030000bqk54kg2saj3lso3oh20&ratio=720p&line=0
好像又看到了一絲希望，我趕緊修改URL在瀏覽器中又試了一下，果然真的沒水印了。
https://aweme.snssdk.com/aweme/v1/play/?video_id=v0200f030000bqk54kg2saj3lso3oh20&ratio=720p&line=0
到這才發(fā)現(xiàn)抖音去水印 簡單的讓人感動，哈哈哈~
身體力行
既然原理都清晰了，剩下的就是一步一步實現(xiàn)功能了，原理看著挺簡單的，但實現(xiàn)中還是遇到一點點小坑，浪費了不少時間。
實現(xiàn)過程只有簡單的三步：
- 1、從輸入框中過濾取出視頻短連接
- 2、短連接傳到后端解析出無水印的視頻
URL - 3、視頻
URL傳遞給前端預(yù)覽、下載
后端并沒有什么難度，一步一步按照上邊分析的流程解析真實視頻 URL 就可以了。
注意 ：我們想得到的地址
URL，都是當(dāng)前短連接URL經(jīng)過重定向后的URL。而抖音有些鏈接是不支持瀏覽器訪問的，所以要手動修改User-agent屬性模擬移動端訪問才可以。
/** * @param url * @author xiaofu * @description 獲取當(dāng)前鏈接重定向后的url * @date 2020/9/15 12:43 */public static String getLocation(String url) { try { URL serverUrl = new URL(url); HttpURLConnection conn = (HttpURLConnection) serverUrl.openConnection(); conn.setRequestMethod("GET"); conn.setInstanceFollowRedirects(false); conn.setRequestProperty("User-agent", "ua");//模擬手機連接 conn.connect(); String location = conn.getHeaderField("Location"); return location; } catch (Exception e) { e.printStackTrace(); } return ""; }
下邊是完整的后端實現(xiàn)，可以看到代碼量非常的少。
/** * @author xiaofu-公眾號：程序員內(nèi)點事 * @description 抖音無水印視頻下載 * @date 2020/9/15 18:44 */@Slf4j @Controllerpublic class DYController { public static String DOU_YIN_BASE_URL = "https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/?item_ids="; /** * @param url * @author xiaofu * @description 解析抖音無水印視頻 * @date 2020/9/15 12:43 */ @RequestMapping("/parseVideoUrl") @ResponseBody public String parseVideoUrl(@RequestBody String url) throws Exception { DYDto dyDto = new DYDto(); try { url = URLDecoder.decode(url).replace("url=", ""); /** * 1、短連接重定向后的 URL */ String redirectUrl = CommonUtils.getLocation(url); /** * 2、拿到視頻對應(yīng)的 ItemId */ String videoUrl = ""; String musicUrl = ""; String videoPic = ""; String desc = ""; if (!StringUtils.isEmpty(redirectUrl)) { /** * 3、用 ItemId 拿視頻的詳細信息，包括無水印視頻url */ String itemId = CommonUtils.matchNo(redirectUrl); StringBuilder sb = new StringBuilder(); sb.append(DOU_YIN_BASE_URL).append(itemId); String videoResult = CommonUtils.httpGet(sb.toString()); DYResult dyResult = JSON.parseObject(videoResult, DYResult.class); /** * 4、無水印視頻 url */ videoUrl = dyResult.getItem_list().get(0) .getVideo().getPlay_addr().getUrl_list().get(0) .replace("playwm", "play"); String videoRedirectUrl = CommonUtils.getLocation(videoUrl); dyDto.setVideoUrl(videoRedirectUrl); /** * 5、音頻 url */ musicUrl = dyResult.getItem_list().get(0).getMusic().getPlay_url().getUri(); dyDto.setMusicUrl(musicUrl); /** * 6、封面 */ videoPic = dyResult.getItem_list().get(0).getVideo().getDynamic_cover().getUrl_list().get(0); dyDto.setVideoPic(videoPic); /** * 7、視頻文案 */ desc = dyResult.getItem_list().get(0).getDesc(); dyDto.setDesc(desc); } } catch (Exception e) { log.error("去水印異常 {}", e); } return JSON.toJSONString(dyDto); }}
前端實現(xiàn)也比較簡單，拿到后端解析出來的視頻URL 預(yù)覽播放、下載就OK了。
為快速實現(xiàn)我用了老古董JQuery，我這個年紀的人對它感情還是很深厚的，UI 框架用的 layer.js。源碼后邊會分享給大家，就不全貼出來了。
$.ajax({ url: '/parseVideoUrl', type: 'POST', data: {"url": link}, success: function (data) { $('.qsy-submit').attr('disabled', false); try { var rows = JSON.parse(data); layer.close(index); layer.open({ type: 1, title: false, closeBtn: 1, shadeClose: true, skin: 'yourclass', content: `<p style="overflow:hidden;height: 580px;width: 350px;"><p><p class="popButton"><a href="###" rel="noopener nofollow noreferrer" onclick="downloadVideo('${rows['videoUrl']}','${rows['desc']}')"><button class="layui-bg-red layui-btn-sm layui-btn">下載視頻</button></a></p><p class="popButton"><textarea id="videourl" cols="1" rows="1" style="height:0;width:0;position: absolute;">${rows['videoUrl']}</textarea><button class="layui-btn-sm layui-bg-blue layui-btn" onclick="copy('videourl')">復(fù)制鏈接</button></p><p class="popButton"><a href="###" rel="noopener nofollow noreferrer" onclick="downloadVideo('${rows['musicUrl']}','${rows['desc']}')"><button class="layui-btn-sm layui-btn">下載音頻</button></a></p><video id="video" width="360px" height="500px" src="${rows['videoUrl']}" controls = "true" poster="${rows['videoPic']}" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"><source src="${rows['videoUrl']}" type="video/mp4"> </video></p></p>` //content: `<video id="video" src="${rows['videoUrl']}" controls = "true" poster="${rows['videoPic']}" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"><source src="${rows['videoUrl']}" type="video/mp4"> </video>` }); } catch (error) { layer.alert('錯誤信息:' + error, { title: '異常', skin: 'layui-layer-lan', closeBtn: 0, anim: 4 //動畫類型 }); return false; } }, error: function (err) { console.log(err); layer.close(index); $('.qsy-submit').attr('disabled', false); }, done: function () { layer.close(index); }})})
注意：我們在自己的網(wǎng)站中引用其它網(wǎng)站的資源
URL，由于不在同一個域名下referrer不同，通常會遇到三方網(wǎng)站的防盜鏈攔截，所以要想正常訪問三方資源，必須要隱藏請求的referrer,頁面中設(shè)置如下參數(shù)。
<!-- 解決訪問視頻url 請求403異常 --> <meta name="referrer" content="no-referrer"/>
還簡單做了下移動端適配，樣式看著還可以，但是功能使用起來有點差強人意，后邊在做優(yōu)化了。
總結(jié)
很多東西就是這樣，沒認真研究之前總感覺深不可測，可一旦接觸到技術(shù)的本質(zhì)，又開始笑自己之前好蠢，懂與不懂有時就查那么一層窗戶紙。
