在 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 帳號註冊
你也可能喜歡
App Inventor 使用最新試算表元件 Spreadsheet_Part 3
App Inventor 使用最新試算表元件 Spreadsheet_Part 1
