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

App Inventor 使用網頁檔案播放影音 進階版

昨天教了如何透過網頁檔案播放影片,單說穿了也不過是做了一個播放影片的網頁,再用 App Inventor 瀏覽而已,所以今天要來教一些進階的應用,讓使用者可以在 App 選擇要播放哪一部影片,將資料傳到 HTML 後,讓它更新影片資訊。那麼請跟著以下的教學:





1. 我們一樣先從網頁檔下手,開啟昨天的 HTML

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

先在 style 標籤底下加入以下語法來載入 jQuery

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

然後找到跑馬燈那一行,把 h2 標籤裡的標題再用 p 標籤包起來。(如果沒包起來,後續在更改標題時,在 App Inventor 會變很小的黑字,但是用瀏覽器瀏覽卻還是正常的,奇怪!!)

<marquee scrollamount="7"><h2><p>Billie Eilish - No Time To Die</p></h2></marquee>

最後在 div 標籤底下,加入以下 script 碼:

<script>
	var webViewString = window.AppInventor.getWebViewString();
		
	if(webViewString) {
		var videoDatas = webViewString.split(",");
			
		$("p").replaceWith(videoDatas[0]);
		$("source").attr("src", videoDatas[1]);
	}
</script>

最開始先用 window.AppInventor.getWebViewString() 方法,取得從 App Inventor 傳過來的瀏覽器字串,並把資料給變數 webViewString 。
傳過來的格式是:影片名稱,影片網址

再來判斷有收到資料後,用 split 方法對 webViewString 資料做切割,再給變數 videoDatas。
對逗號做切割後,videoDatas 的資料就是清單格式,如下:
[“影片名稱”, “影片網址”]

接著用 jQuery 的 replaceWith 方法,把 p 標籤裡的標題更換。(注意!在 App Inventor 以外的程式語言,基本上 清單/陣列 的第一項索引值為 0。)

最後用 jQuery 的 attr 方法,把 source 標籤裡的 src 屬性值更換。(換影片網址)


HTML 到此撰寫完畢!重新上傳到虛擬主機~~


HTML 完整碼

<!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>
	<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
	<div class="center">
	<marquee scrollamount="7"><h2><p>Billie Eilish - No Time To Die</p></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>	
	<script>
		var webViewString = window.AppInventor.getWebViewString();
		
		if(webViewString) {
			var videoDatas = webViewString.split(",");
			
			$("p").replaceWith(videoDatas[0]);
			$("source").attr("src", videoDatas[1]);
		}
	</script>
</body>
</html>


2. 開啟昨天的 App Inventor 專案(昨天的專案很簡單,所以我沒附上檔案。)

新增下拉式選單和按鈕元件


切換到程式設計

新增以下變數方塊:

Billie Eilish - No Time To Die
https://jbprogramnotes.com/Program/AppInventor/Videos/Billie%20Eilish%20-%20No%20Time%20To%20Die.mp4

Sam Smith - Writing_s On The Wall (from Spectre) (Official Video)
https://jbprogramnotes.com/Program/AppInventor/Videos/Sam%20Smith%20-%20Writing_s%20On%20The%20Wall%20%28from%20Spectre%29%20%28Official%20Video%29.mp4


變數影片資訊,我用二維清單(清單裡再放清單)來存放影片的標題和網址。(影片請事先上傳到自己的虛擬主機)



初始化方塊修改如下:

太簡單了跳過講解~~ 需要講解請底下留言


當下拉式選單選擇完成方塊如下:



從變數影片資訊,選擇下拉式選到的歌名的索引值(因為剛剛是按照順序新增的,所以索引都一樣,例如:No Time To Die 在第一項,在變數影片資訊裡也是第一項。)
上方選擇好後還是清單的格式,第一項是歌名、第二項是網址,所以再分別給變數歌名、網址。

看不懂請下方留言,我再想想看該怎麼更詳細的解說。

網路瀏覽器的格式,剛剛在 HTML 那有講到,是 影片名稱,影片網址。



最後是播放按鈕被點選方塊,如下:

太簡單了跳過講解~~ 需要講解請底下留言


App 到此設計完畢!!

這個範例如果熟練,不只有影片,連音樂也能套用,最後再結合我之前寫的「App Inventor 讀取 YouTube 影片」,就可以做出一個個人化的專業 mp3 播放器 App。





App 完整程式方塊





App 專案程式檔案下載

點我下載





App 完整範例執行畫面




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

可以多點幾次喔~~

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

發表迴響