在 HTML 裡嵌入 Google Drive 的影片檔案
在 HTML 檔案裡,我們可以利用 video 標籤,將影片嵌入到我們的網頁播放,不過前提是妳的影片檔要放在主機空間,那麼可能就有同學疑問,如果放在 Google 雲端硬碟可不可以!?
答案是:可以!!!
而且我們還不用自己寫嵌入的標籤,只要直接複製即可。
那麼請跟著以下的教學:
1. 首先開啟妳的 Google 雲端硬碟,並將影片檔案丟上去。
影片上傳成功後,滑鼠點兩下打開會看到「我們正在處理影片……」的字樣。
請等待一段時間,等系統處理完,且滑鼠點開可以直接看到影片後,再繼續進行下面步驟。
將影片點開,於右上角的三個點以滑鼠點選,再點選「在新視窗中開啟」選項。
在新開啟的視窗中,一樣於右上角的三個點以滑鼠點選,再點選「嵌入項目」選項。
將頁面顯示出來的標籤先複製到記事本
其實將上述標籤,直接複製到妳網頁的 body 標籤底下就能用了!
不過可能有很多剛學網頁的同學不太清楚,所以這裡再帶同學手把手撰寫一個網頁檔。
2. 開啟記事本(同學習慣用 DreamWeaver 也行)
輸入以下 HTML 碼:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>在 HTML 裡嵌入 Google Drive 的影片檔案</title>
</head>
<body>
</body>
</html>
在 body 標籤裡面加入剛剛複製的 iframe 標籤
<body>
<iframe src="https://drive.google.com/file/d/1isjbIdTfobWrj6PJbfRhabPfXuS6O8JQ/preview" width="640" height="480" allow="autoplay"></iframe>
</body>
將檔案存成 index.html 後,就能用瀏覽器打開來看了!
影片位置預設在瀏覽器的左上角
接著,我們要在 iframe 標籤的前後,新增一個開始及結束的 div 標籤,再將這個 div 置中,這樣影片就會顯示在網頁中間了。
<body>
<div align="center">
<iframe src="https://drive.google.com/file/d/1isjbIdTfobWrj6PJbfRhabPfXuS6O8JQ/preview" width="640" height="480" allow="autoplay"></iframe>
</div>
</body>
存檔後再次瀏覽
這次的教學就到這邊~~
HTML 完整代碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>在 HTML 裡嵌入 Google Drive 的影片檔案</title>
</head>
<body>
<div align="center">
<iframe src="https://drive.google.com/file/d/1isjbIdTfobWrj6PJbfRhabPfXuS6O8JQ/preview" width="640" height="480" allow="autoplay"></iframe>
</div>
</body>
</html>