CODEWITHSUNDEEP
javascripthtmlwindows-8
Likhit
Likhit

Reputation: 809

Changing the source of the video tag in Windows 8

I'm trying to build a small video player for Windows 8 in HTML & JavaScript. I want to be able to change the video source by using the FilePicker.

This is the code I'm using:

<body>
  <video id="player" controls="controls">
    <!--<source src="trailer.mp4" type="video/mp4" />-->
    <source src="trailer (1).mp4" type="video/mp4" />
  </video>
  <button id="pickFile">Pick File</button>
</body>

And in the default.js file:

args.setPromise(WinJS.UI.processAll().done(function (e) {
            pickFile.addEventListener("click", function (e) {
                var picker = new Windows.Storage.Pickers.FileOpenPicker();
                picker.fileTypeFilter.push(".mp4", ".webm", ".ogv");
                picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
                picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
                picker.pickSingleFileAsync().then(function (file) {
                    if (file) {
                        player.setAttribute("src", file.path);
                        player.load();
                        player.play();
                    }
                }, function (err) {
                    console.log(err.description);
                });
            }, false);
        }));

I'm unfortunately getting the error:

Error: Unsupported video type or invalid file path

How can I correctly change the source of the video tag so as to play local videos?

Upvotes: 1

Views: 352

Answers (1)

Likhit
Likhit

Reputation: 809

After looking around some more I found out that the file path must be converted into an URL object before setting as source to the tag. Change this line:

player.setAttribute("src", file.path);

to:

var src = URL.createObjectURL(file);
payer.setAttribute("src", src);

Upvotes: 1

Related Questions