locked
How to Put video from file picker into a listView control

    Question

  • Hi all,

    I am a new to javaScript and metro app. I am trying to put a thumbnail video from user video library. Picker video file is working fine, but I really not sure I make the right way to put it into a listbox.

    I need help to check what is the right I should do. Here my javascript code:

    (function () {
        "use strict";
    
        var playList = {};
    
        // 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) {
            // TODO: Initialize the fragment here.
            initialize();
        };
    
        function initialize() {
            var Pickers = Windows.Storage.Pickers;
            var picker = Pickers.FileOpenPicker();
            picker.fileTypeFilter.append(".mp4", ".wmv");
            picker.viewMode = Pickers.PickerViewMode.thumbnail;
            picker.suggestedStartLocation = Pickers.PickerLocationId.videosLibrary;
    
            picker.pickMultipleFilesAsync().then(function (items) {
                if (items != null) {
                    playList.list = new Windows.Media.Playlists.Playlist();
                    items.forEach(function (item) {
                        playList.list.files.append(item);
                    })
                    showListView();
                };
            });
        };
    
        function showListView() {
            var dataSourceOptions = {                                                        // Specify options for the ListView control
                mode: Windows.Storage.Pickers.PickerViewMode.thumbnail,
                requestedThumbnailSize: 200
            };
            var dataSource = new WinJS.UI.StorageDataSource(playList.dataSource, dataSourceOptions);
            var listViewOptions = {
                itemDataSource: dataSource,
                itemTemplate: 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;
        };
        WinJS.UI.Pages.define("/html/homePage.html", {
            ready: ready
        });
    })();

    Here my html page:

            <section aria-label="Main content" role="main">
                <div>
                    <video id="singlePlayVideo" controls="controls" width="800" height="450">
                    </video>
                </div>
                <!--<label id="judul"></label>-->
                <div id="listViewDiv" class="mediumImageTemplatizedListView">
                </div>
            </section>

    Please help me, thank you very much. 


    Jannen Siahaan - Indonesia

    Sunday, May 13, 2012 10:20 PM

Answers