在 HTML 裡嵌入 Google Drive 的影片檔案
Google,  HTML

在 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>




教學範例使用影片分享

片名:聖鬥士星矢 – 真紅少年傳說





範例教學影片




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

發表迴響