首頁 > 開發者 > JavaScript
標籤：註冊 本地 picker css 檢查 new net roc 檔案夾
在應用程式的日常使用中，經常會使用多媒體播放器來播放多媒體檔案，包括視頻、音頻等，因此對於開發人員來說，學習多媒體播放技術對開發應用是很有協助的。本小節主要介紹如何使用HTML5和JavaScrip實現播放本地視頻。
想要在應用程式中實現多媒體播放功能，需要使用video控制項，下面簡單介紹下video控制項的幾個常用屬性：
接下來通過一個具體的應用程式講解與視頻播放相關的知識點。首先在Visual Studio 2012中建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為MediaApplication。然後開啟default.html檔案，在body元素中添加兩個div元素，並在第一個div中添加一個用於播放視頻的video控制項，將其class屬性設定為"videoStyle"，id屬性設定為"videoId"；在第二個div中添加一個用於選取多媒體檔案的"開啟"按鈕和一個用於顯示提示資訊的p元素，並將這兩個元素的id屬性分別設定為"pickFileButton"和"output"，相關代碼如下所示：
<body>
<div>
????<h2 id="title">多媒體樣本</h2>
<video class="videoStyle" id="videoId" controls="true" loop="true" src=""></video>
</div>
????<div>
<button id="pickFileButton">開啟</button>
????<p id="output"> </p>
</div>
</body>
為了控制介面元素的顯示外觀，在css檔案夾裡建立一個CSS樣式檔案，將其命名為StyleFile，並在其中添加如下代碼，用於設定各元素的位置或樣式。
/*設定<h2>元素的顯示位置*/
#title
{
margin:0px 20px 20px 530px;
}
/*設定video控制項的樣式*/
.videoStyle
{
height:170px;
width:230px;
margin:0px 20px 20px 480px;
background:blue;
}
/*設定按鈕的顯示位置和大小*/
#pickFileButton
{
margin-left:550px;
font-size:15px;
}
/*設定p元素的顯示位置*/
#output {
margin-left:500px;
}
接著在default.html檔案的head元素內引用樣式檔案StyleFile.css，以便實現控制介面元素的顯示外觀，代碼如下所示：
<link href="/css/StyleFile.css" rel="stylesheet" />
布局好前台介面後，下面來應用的後台邏輯功能。開啟default.js檔案，在檔案中的"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"開啟"按鈕註冊click事件處理函數，相關代碼如下所示：
document.getElementById("pickFileButton").addEventListener("click", pickFile);
代碼調用getElementById函數擷取id為"pickFileButton"的button按鈕，並使用addEventListener函數為該按鈕的click事件註冊事件處理函數PickFile。
接下來在"app.onactivated = function (args) {......};"語句後面定義事件處理函數PickFile，實現檔案的選取和視頻播放功能，相關代碼如下所示：
//定義click事件處理函數
function pickFile() {
//建立FileOpenPicker類型的對象
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
//設定檔案選擇器的初始位置為視頻庫
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
//檔案類型篩選
openPicker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);
//選取多媒體檔案
openPicker.pickSingleFileAsync().then(function (file) {
if (file) {
var localVideo = document.getElementById("videoId");
//為多媒體檔案建立URL，並賦值給video控制項的src屬性
localVideo.src = URL.createObjectURL(file, { oneTimeOnly: true });
//播放這個多媒體檔案
localVideo.play();
//成功開啟多媒體檔案時，給出提示訊息
output.innerText = "成功開啟了一個多媒體檔案！";
}
else{
output.innerText = "請選取一個多媒體檔案！";
}
},
//如果出現異常，進行相應的異常處理
function (error) {
output.innerText = "錯誤：" + error.message;
});
}
上面代碼中，首先建立一個FileOpenPicker類型的對象openPicker作為檔案選擇器，並設定openPicker對象的suggestedStartLocation屬性值為videosLibrary，將檔案選擇器起始位置定位為本地的視頻庫。然後通過openPicker對象的fileTypeFilter.replaceAll函數，設定檔案選擇器能夠選取的檔案類型為".mp4"和".wmv"。接下來調用openPicker對象的pickSingleFileAsync函數來選取多媒體檔案，在pickSingleFileAsync函數中，通過if語句對file進行檢查，如果file不為空白，說明已經選取了檔案，那麼調用document.getElementById函數擷取id屬性值為"videoId"的元素，將其賦值給localVideo變數，並調用URL.createObjectURL函數為所選取的多媒體檔案建立一個URL，賦值給localVideo對象的src屬性。URL.createObjectURL函數有兩個參數，一個是file，一個是oneTimeOnly。其中file為所選取的多媒體檔案，oneTimeOnly指為多媒體檔案建立的URL是否只使用一次。最後調用localVideo對象的play函數來實現視頻播放功能，並在p元素中顯示提示資訊"成功開啟了一個多媒體檔案！"；如果沒有選取檔案，則會在p元素中顯示提示資訊"請選取一個多媒體檔案！"。
啟動調試，介面的初始狀態19-32所示。單擊"開啟"按鈕，會進入檔案選擇器介面，預設起始位置是視頻庫，如果想開啟其他位置中的多媒體檔案，可以單擊"檔案"旁邊的下拉符號進行選擇。這裡選擇視頻庫中的"單車比賽.mp4"視頻檔案，該檔案會載入到video控制項中並播放，同時介面中會顯示提示資訊"成功開啟了一個多媒體檔案！"，運行效果19-33所示。
圖19-32 介面初始狀態
圖19-33 多媒體播放的效果
Win10系列：JavaScript多媒體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
