App Inventor 使用網頁檔案播放影音
App Inventor,  HTML

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 帳號註冊

發表迴響