【Web】如何正確取得 Google Driver 雲端硬碟的 Direct Link 直連網址而非 Shareable Link 分享網址，當 html 元件的 src

tags: Web Design HTML Google Driver

Common 前言

1. 在撰寫網頁前端時，使用 html 的 tag，例如：img, audio, vedio…
2. 若想使用儲存在雲端 Google Driver 的資源時，該如何取得正確的 url?

Wrong Exmaple 錯誤示範

1. 取得檔案共用連結

• https://drive.google.com/open?id=12sXDaBLwYPrlHUY_mFDuE_reChXRVKeg

  

2. 共用 >> 與他人共用

• https://drive.google.com/file/d/12sXDaBLwYPrlHUY_mFDuE_reChXRVKeg/view?usp=sharing

  

Code 程式碼

// 第一種
<audio src="https://drive.google.com/open?id=12sXDaBLwYPrlHUY_mFDuE_reChXRVKeg" preload="none" loop controls></audio>

// 第二種
<audio src="https://drive.google.com/file/d/12sXDaBLwYPrlHUY_mFDuE_reChXRVKeg/view?usp=sharing" preload="none" loop controls></audio>

Result 結果

第一種	第二種

Correct Example 正確步驟

步驟1：取得分享連結

• 可以透過 “Wrong Exmaple 錯誤示範” 的兩種方法取得 Shareable Link 分享網址
  • 取得檔案共用連結
  • 共用 >> 與他人共用

步驟2：套用公式

1. 公式：https://drive.google.com/uc?export=download&id=FILE_ID
2. 透過網站：
   • gdocs2direct (只能轉換第2種)：
     https://sites.google.com/site/gdocs2direct/
   • google-drive-direct-link-generator (第1種、第2種都能轉換)：
     https://www.wonderplugin.com/online-tools/google-drive-direct-link-generator/

Code 程式碼

<audio src="https://drive.google.com/uc?export=download&id=12sXDaBLwYPrlHUY_mFDuE_reChXRVKeg" preload="none" loop controls></audio>

Result 結果

Reference 參考資料

1. 圖示：https://www.youtube.com/watch?v=etYBsOwM8JY
2. [自由網路] 如何取得 Google Drive (真實)外連位址 (Direct Link)
   http://riverhippo.blogspot.tw/2016/02/google-drive-direct-link.html