站長留言

  • ✅ 本站維護及更新歷史紀錄,詳情請參考公告
  • ✅ 有任何意見、想法,歡迎留言給Spicy知道喔
  • ✅ 固定於每周一至周五更新Blogger文章,周末不定期
雲端硬碟網頁Google

【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:取得分享連結

步驟2:套用公式

  1. 公式:https://drive.google.com/uc?export=download&id=FILE_ID
  2. 透過網站:

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

1 則留言:

  1. I am really impressed together with your writing abilities as smartly as with the layout on your blog. Is this a paid topic or did you customize it your self? Anyway keep up the nice high quality writing, it is uncommon to peer a great weblog like this one these days..

    回覆刪除

本網站建議使用電腦或平板瀏覽