1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [密技] 將上傳到 Dropbox 的影片或照片,分享並嵌入到網站中
網頁開發 網頁設計

[密技] 將上傳到 Dropbox 的影片或照片,分享並嵌入到網站中

2020/11/16

梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
  影片一直是個不太好處理的問題,一來是檔案大小問題,二來是流量問題,當把影片放在自己租用的虛擬主機中,應該不用太久,網站的流量就會被影片給吃光光,因此大部分的朋友,就會選擇將影片放到 Youtube 中,再把影片嵌入網頁中,雖然這是一個作法,但把Youtube嵌入到網站,一來是播放區塊則會顯示Youtube的相關訊息,二來是當用手機預覽時,Youtube的影片會用APP的方式開啟。

因此也有些朋友,會將影片放到Vimeo,雖然Vimeo可在手機預覽時,可直接在頁面中播放,但Vimeo本身的計費不便宜,最近梅干無意間,在Dropbox官方的討論版中,發現竟然Dropbox有這個隱藏密技,可將上傳到Dropbox的影片或照片,修改參數就可將影片或照片,嵌入到網站中啦!因此有需要的朋友現在也一塊來看看囉!


Step1
首先,先將影片或照片,上傳到 Dropbox 中,接著將要嵌入的影片或照片,按右上的 設定 圖示。
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
Step2
選擇「共享」。
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
Step3
再選擇「建立連結」。
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
Step4
接著當連結產生後,再點「複製連結」。
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
Step5
這時下方就會出現,已複製的連結位置,再將連結網址後方的參數?dl=0改成?raw=1
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
Step6
接著就可用 video 的標籤語法,將影片嵌入到自己網頁中啦!是不是超方便的,且又不用透過第三方的工具,因此有影片需求的朋友,不妨可參考看看囉!
梅問題-[密技]將上傳到Dropbox的影片或照片,分享並嵌入網站中
#範例展示