Hi all,
I am new to JavaScript/HTML5.
I am trying to make a program based on video on BUILD "776-HD Metro style app Video and Audio Part 2.wmv". I have been tried five times from scratch and compare character by character with the video, but I am still not having the Video on my local machine
and also on my metro simulator, I only have the application title like the regular navigation app template. I've checked the project appxmanifest to allow access to my Video Library.
Here my homePage.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet">
<link href="/css/homePage.css" rel="stylesheet">
<script src="/js/homePage.js"></script>
<style>
/* Overall list dimensions */
.mediumTemplatizedListView {
width: 90%;
height: 90%;
}
/*image*/
.mediumTemplatizedListView img {
width: 100%;
}
.win-listview-mediumImageTemplate {
width: 250px;
height: 200px;
overflow: hidden;
margin-right: 6px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis"><span class="pagetitle">Welcome to Build776
Video Demo!</span></h1>
</header>
<section aria-label="Main content" role="main">
<div id="listViewDiv" class="mediumTemplatizedListView"></div>
</section>
</div>
</body>
</html>
Here my homePage.js:
(function () {
"use strict";
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
function ready(element, options) {
initialize();
}
WinJS.UI.Pages.define("/html/homePage.html", {
ready: ready
});
/* this is me */
function initialize() {
// Create a StorageFileQuery representing the Picture Library
var library = Windows.Storage.KnownFolders.videosLibrary;
var queryOptions = new Windows.Storage.Search.QueryOptions;
queryOptions.folderDepth = Windows.Storage.Search.FolderDepth.deep;
queryOptions.indexerOption = Windows.Storage.Search.IndexerOption.useIndexerWhenAvailable;
queryOptions.fileTypeFilter.append(".mp4");
queryOptions.fileTypeFilter.append(".wmv");
var fileQuery = library.createFileQueryWithOptions(queryOptions);
// Specify options for the Storage DataSource Adaptor
var dataSourceOptions = {
mode: Windows.Storage.FileProperties.ThumbnailMode.videosView,
requestedThumbnailSize: 200
};
var dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);
// Specify options for the ListView control
var listViewOptions = {
dataSource: dataSource,
itemRenderer: storageRenderer,
layout: new WinJS.UI.GridLayout(),
selectionMode: "none"
};
var listViewControl = new WinJS.UI.ListView(document.getElementById("listViewDiv"), listViewOptions);
}
function storageRenderer(item) {
var thumb = item.data.thumbnail;
var result = document.createElement("div");
result.className = "win-listview-mediumImageTemplate";
if (thumb) {
var url = URL.createObjectURL(thumb, true);
result.innerHTML = "<img src='" + url + "'/>";
}
else {
result.innerHTML = "<div></div>";
}
var text = document.createElement("div");
text.innerText = item.data.fileName;
result.appendChild(text);
return result;
};
/* this is me */
})();
Please help me.
Jannen Siahaan - Indonesia
