App Inventor 使用網頁檔案播放影音
在 App Inventor 裡有一個影片播放器元件，但是要使用這個元件，我們必須把影片上傳到 App Inventor 後，再去設定來源，但是如此一來如果要上傳多部影片，App Inventor 很容易就會超出限制(可以參考我之前寫的，「突破 30MB 限制 Part2」文章來解決。)，雖然官方文件有寫說可以使用外部檔案，但我從來沒試成功過，所以今天要試著使用 HTML 的 video 標籤，來播放放在虛擬主機上的影片，並透過網路瀏覽器來瀏覽這個網頁檔。
以下請跟著教學：
1. 首先來撰寫網頁檔，請開啟記事本，並輸入以下內容：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>App Inventor</title>
</head>
<body>
</body>
</html>檔名存成 index.html
接著繼續輸入 HTML 標籤
在 body 裡輸入一個 div 標籤，並設定 class 為 center。
這是等等要置中影片用的
<body>
<div class="center">
</div>
</body>再來是重頭戲，在 div 標籤的裡面輸入 video 標籤，並設定屬性：寬為 320、高為 240、controls。
controls 是幫影片加上播放控制、音量… 等
<div class="center">
<video width="320" height="240" controls>
</video>
</div>然後要設定影片來源
在 video 標籤裡新增 source 標籤(這個標籤不用加</source>)
屬性 src 設定影片來源網址(可以把影片上傳到虛擬主機，再設定為這個網址。沒有的可以先用我的)
屬性 type 設定影片的格式，我的是 mp4。
<div class="center">
<video width="320" height="240" controls>
<source src="" type="video/mp4">
</video>
</div><source src="https://jbprogramnotes.com/Program/AppInventor/Videos/Billie%20Eilish%20-%20No%20Time%20To%20Die.mp4" type="video/mp4">到目前為止，已經可以在瀏覽器觀看影片了！趕快打開看看
接下來我們讓它看起來美觀一點
來幫網頁加入背景色、讓影片置中並在影片的上方，加入一個標題的跑馬燈、變更標題顏色。
回到網頁檔，在 div 和 video 標籤的中間，加入以下跑馬燈語法：
<marquee scrollamount="7"><h2>Billie Eilish - No Time To Die</h2></marquee> scrollamount 可以設定移動速度
裡面歌名(這首是最新 007 電影的主題曲) 用 h2 標題標籤框起來
最後在 head 標籤裡面新增以下 style 標籤：
<style>
body {
background-color: #444444ff;
}
h2 {
color: #ffffffff;
}
.center {
text-align: center;
}
</style>第一個 body 是更改網頁的背景顏色，#444444ff 色碼在 App Inventor 是深灰。
第二個改 h2 標籤的文字顏色，此為白色。
第三個是剛剛在 div 設定的 class「center」，將這個 div 標籤裡的東西置中。
網頁檔在此就全部撰寫完畢！！
網頁檔案內容
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>App Inventor</title>
<style>
body {
background-color: #444444ff;
}
h2 {
color: #ffffffff;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<marquee scrollamount="7"><h2>Billie Eilish - No Time To Die</h2></marquee>
<video width="320" height="240" controls>
<source src="https://jbprogramnotes.com/Program/AppInventor/Videos/Billie%20Eilish%20-%20No%20Time%20To%20Die.mp4" type="video/mp4">
</video>
</div>
</body>
</html>2. 開啟 App Inventor，需要元件只有網路瀏覽器。
切換至程式設計
設定瀏覽器的網址來源，再回首頁。(可以將網頁檔上傳至 App Inventor，或虛擬主機。)
https://jbprogramnotes.com/Program/AppInventor/Videos/index.html
App 撰寫就到這！是不是超簡單～～
趕快來執行看看(我用模擬器影片畫面會全黑，用手機模擬就正常。)
App 執行範例畫面
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
你也可能喜歡
使用 App Inventor 傳送訊息到 LINE Part 2
![[教學文章分享] App Inventor 串接 ChatGPT](https://i0.wp.com/i.imgur.com/CGIkZvo.png?resize=500%2C330&ssl=1)
[教學文章分享] App Inventor 串接 ChatGPT
