Play YouTube Video in Javascript Metro App

Category: windows metro apps html5

Question

Anders Bratland on Thu, 12 Jul 2012 20:06:28


Hi!

I'm looking for the best/easiest way to play a YouTube video in a Javascript Metro App? I tried the PlayerFramework, but I didn't succeed with that. I got a "unsupported video format or invalid path" error. When I tried to IFrame it, I got a problem with winControl.

Any pointers in the right direction are appreciated!

/Anders 


Replies

Rob Caplan [MSFT] on Thu, 12 Jul 2012 20:56:49


Are you trying to play a Flash video or an HTML5 video? By default YouTube uses Flash, but some (not all!) videos are available in HTML5 format if sign up for their HTML5 beta at www.youtube.com/html5 .

Metro style apps cannot play Flash videos, but shouldn't have trouble with the HTML5 ones.

--Rob

Dino He on Fri, 13 Jul 2012 10:23:29


HI

So what's the problem with wincontrol?

Use this for Youtobe.html:

 <iframe width="853" height="480" src="http://www.youtube.com/embed/JW5meKfy3fY" frameborder="0" allowfullscreen>
   </iframe>

And in default html

HTML: 
<div id="Youtubevedio"></div>
js:
WinJS.UI.Pages.render("/Youtube.html",document.getElementById("Youtubevedio"));

That's work fine.


andylin5 on Sun, 12 Aug 2012 09:45:59


HI

So what's the problem with wincontrol?

Use this for Youtobe.html:

 <iframe width="853" height="480" src="http://www.youtube.com/embed/JW5meKfy3fY" frameborder="0" allowfullscreen>
   </iframe>

And in default html

HTML: 
<div id="YoutoBeVedio"></div>
js:
WinJS.UI.Pages.render("/Youtobe.html",document.getElementById("YoutoBeVedio"));

That's work fine.

sorry,i follow step don't work,

Is not ?

default html in add

1.default HTML: <div id="YoutoBeVedio"></div>

2.default js:WinJS.UI.Pages.render("/Youtobe.html",document.getElementById("YoutoBeVedio"));

and new Youtobe.html in add

<iframe width="853" height="480" src="http://www.youtube.com/embed/JW5meKfy3fY" frameborder="0" allowfullscreen>
   </iframe>

Dino He on Mon, 13 Aug 2012 02:32:21


Hi

Fix some typo, Please try again.

And not all the video support this.

Please refer to this link:

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/11658d4f-de1b-47cd-8b31-56267e778f81

andylin5 on Mon, 13 Aug 2012 08:45:32


Thanks Dino for the reply,

That's work fine,but don't play.

Because ActiveX Plug-in,Adobe Flash Player not install in Metro app.

js metro app:



Dino He on Tue, 14 Aug 2012 14:13:37


Are you trying to play a Flash video or an HTML5 video? By default YouTube uses Flash, but some (not all!) videos are available in HTML5 format if sign up for their HTML5 beta at www.youtube.com/html5 .

Metro style apps cannot play Flash videos, but shouldn't have trouble with the HTML5 ones.

--Rob


This only work for HTML5 videos.

andylin5 on Wed, 15 Aug 2012 03:31:49


i did join the html5 trial,but youtube still in flash mode in windows8 ie.


i upload mp4 file on youtube.

Jeff Sanders on Thu, 16 Aug 2012 19:01:15


See this:

http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html

-Jeff

Dino He on Thu, 20 Sep 2012 07:34:07


Hi

As Rob said, it's only support html5 vedio not Flash vedio.

please refer to this thread:

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/c54d7934-e860-4d63-887e-1b2d0e1da0ea/