快速入門：視訊檔案轉碼 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
Windows.Media.Transcoding API 可以將視訊檔案從一種格式轉碼成另一種格式。
轉碼是數位媒體檔案 (例如視訊或音訊檔案) 的轉換，也就是從一種格式變成另一種格式。 通常先進行檔案的解碼，然後重新編碼，便產生新的格式。例如，您可以將 Windows Media 檔案轉換成 MP4，以便在支援 MP4 格式的可攜式裝置上播放。或者，您可以將高畫質影片檔案轉換成較低的解析度。在這種情況下，重新編碼的檔案可以使用和原始檔案相同的轉碼器，但編碼設定檔不同。
這個教學課程顯示如何將視訊檔案轉碼成 MP4 格式。 它描述如何使用 FileOpenPicker 類別從系統開啟視訊檔案，然後使用 MediaTranscoder 類別將視訊檔案轉碼成 MP4 格式。最後，描述如何使用 FileSavePicker 類別儲存新編碼的檔案。
這個快速入門的完整程式碼清單將包含在這個教學課程的結尾。將這個程式碼新增至您的 Program.js 檔案。
如需使用 JavaScript 的 Windows 執行階段應用程式中的其他轉碼範例，請參閱轉碼媒體範例。
先決條件
這個主題假設您可以使用 JavaScript 建立基本的 Windows 執行階段應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。
指示
1. 建立新專案
從使用 JavaScript 建立空白的 Windows 市集應用程式開始。如需詳細資訊，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。
2. 選取來源檔案並建立目的地檔案
使用 FileOpenPicker 類別來選取來源檔案，然後使用 FileSavePicker 類別來建立目的地檔案。在 FileOpenPicker 上設定 SuggestedStartLocation 和 FileTypeFilter 屬性。在 FileSavePicker 物件上，設定 SuggestedStartLocation、DefaultFileExtension、SuggestedFileName 及 FileTypeChoices 屬性。請注意，這個函式會呼叫名為 TranscodeFile 的函式。 這是一個由使用者定義用來執行轉碼作業的函式。 我們會在下一個步驟中建立這個函式。
使用 JavaScript 的 Windows Phone 市集應用程式必須使用 PickSingleFileAndContinue 而不使用 PickSingleFileAsync。
function transcodeVideoFile() {
var source;
var destination
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);
openPicker.pickSingleFileAsync().then(
function (file) {
source = file;
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
savePicker.defaultFileExtension = ".mp4";
savePicker.suggestedFileName = "New Video";
savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);
return savePicker.pickSaveFileAsync();
}).then(
function (file) {
destination = file;
TranscodeFile(source, destination);
});
};
3. 建立編碼設定檔
編碼設定檔包含決定目的地檔案編碼方式的各項設定。當您進行檔案的轉碼時，您可以在這裡找到很多相當實用的選項。
Windows.Media.MediaProperties 命名空間提供一組預先定義的編碼設定檔：
- AAC 音訊 (M4A)
- MP3 音訊
- Windows Media 音訊 (WMA)
- MP4 視訊 (H.264 視訊加 AAC 音訊)
- Windows Media 視訊 (WMV)
清單中的前三個設定檔只包含音訊。其他兩個包含視訊和音訊。
下列程式碼會建立 MP4 視訊的設定檔。
var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
靜態 CreateMp4 方法會建立 MP4 編碼設定檔。這個方法的參數會提供影片的目標解析度。在這種情況下，VideoEncodingQuality.hd720p 表示 1280 x 720 個像素，每秒 30 個畫面。("720p" 表示每一個畫面有 720 條漸進式掃描線)。建立預先定義設定檔的其他方法都是沿用這個模式。
另一種方法是，您可以使用 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync 方法來建立一個符合現有媒體檔案的設定檔。或者，如果您知道自己需要的正確編碼設定，可以建立新的 Windows.Media.MediaProperties.MediaEncodingProfile 物件，並填入設定檔詳細資料。
4. 檔案轉碼
若要進行檔案的轉碼，請建立新的 MediaTranscoder 物件並呼叫 MediaTranscoder.PrepareFileTranscodeAsync 方法。傳入來源檔案、目的地檔案，然後進行設定檔的編碼。再呼叫 TranscodeAsync 物件上的 PrepareTranscodeResult 函式，該物件是從非同步轉碼作業傳回的物件。您也可以建立函式來處理非同步作業的錯誤、進度以及完成。
/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {
var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
var transcoder = new Windows.Media.Transcoding.MediaTranscoder();
transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
if (result.canTranscode) {
result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
} else {
// Handle error condition. result.failureReason
}
});
};
PrepareFileTranscodeAsync 方法是非同步執行方法。這樣可以在背景執行轉碼，同時 UI 也保持反應的狀態。
您也應該更新 UI 以及處理任何發生的錯誤。
function transcodeComplete(result) {
// handle completion.
// This snippet writes to an HTML control which is defined external to this snippet.
OutputText.innerHTML = "Transcode Complete";
};
function transcoderErrorHandler(error) {
// handle error condition
};
function transcodeProgress(percent) {
// handle progress.
// This snippet writes to an HTML control which is defined external to this snippet.
ProgressText.innerHTML = "Transcode Progress: " + percent.toString().split(".")[0] + "%";
};
摘要
下列程式碼範例顯示轉碼作業的完整呼叫順序。
首先，程式碼會開啟並儲存檔案。
function transcodeVideoFile() {
var source;
var destination
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);
openPicker.pickSingleFileAsync().then(
function (file) {
source = file;
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
savePicker.defaultFileExtension = ".mp4";
savePicker.suggestedFileName = "New Video";
savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);
return savePicker.pickSaveFileAsync();
}).then(
function (file) {
destination = file;
TranscodeFile(source, destination);
});
};
接下來，程式碼會進行檔案的轉碼。
/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {
var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
var transcoder = new Windows.Media.Transcoding.MediaTranscoder();
transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
if (result.canTranscode) {
result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
} else {
// Handle error condition. result.failureReason
}
});
};
最後，程式碼會處理轉碼進度、錯誤以及完成。
function transcodeComplete(result) {
// handle completion.
// This snippet writes to an HTML control which is defined external to this snippet.
OutputText.innerHTML = "Transcode Complete";
};
function transcoderErrorHandler(error) {
// handle error condition
};
function transcodeProgress(percent) {
// handle progress.
// This snippet writes to an HTML control which is defined external to this snippet.
ProgressText.innerHTML = "Transcode Progress: " + percent.toString().split(".")[0] + "%";
};
相關主題
藍圖
使用 JavaScript 建立 Windows 市集應用程式的藍圖
範例
工作
參考
其他資源