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 那有講到，是影片名稱,影片網址。

最後是播放按鈕被點選方塊，如下：

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