This is a migrated thread and some comments may be shown as answers.

HTMLPlaceHolder cuts off HTML5 Player controls in Firefox

6 Answers 23 Views
HTMLPlaceHolder
This is a migrated thread and some comments may be shown as answers.
Javier
Top achievements
Rank 1
Javier asked on 27 Jun 2014, 10:17 PM
Hi,

I'm using this particular control to  go to a particular website to view a page that has a HTML5 player in it.

HtmlHolder.SourceUrl = new Uri(string.Format(@"http://website.com/Home/ViewVideo?mediaid={0}",media.ID), UriKind.RelativeOrAbsolute);

The page renders fine for the most part, but the player controls are clipped, hiding the maximize button on the right. If I view the page in Firefox on it's own, then you see all controls.  Anyone mind telling me what may be going on here?  IE and Chrome have their native players shown correctly.

6 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 02 Jul 2014, 10:58 AM
Hi Javier,
Could you please send us a precise video link so that we could investigate the issue on our side because we weren't able to reproduce it. We'll appreciate it if you could send us some pictures also.
I've attached my test project so that you could examine it and tell us if it works fine on your side.

Regards,
Zarko
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Javier
Top achievements
Rank 1
answered on 08 Jul 2014, 02:04 PM
Zarko,

Controls are still being clipped.

For a reference, I am using http://www.html5tutorial.info/html5-video.php as an example.

The first attached pic is firefox, going directly to the page itself.
The second pic is in firefox, running the silverlight application.
0
Javier
Top achievements
Rank 1
answered on 08 Jul 2014, 02:06 PM
And let me reiterate, this is not a Flash version of the player, this the native Firefox player in HTML5.
0
Pavel R. Pavlov
Telerik team
answered on 10 Jul 2014, 11:22 AM
Hello Javier, 

I tried to reproduce the reported behavior on our side with the project provided by Zarko and the code works as expected on our side. You can see how I tested the provided link in the project in this screencast.

Regards,
Pavel R. Pavlov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Javier
Top achievements
Rank 1
answered on 10 Jul 2014, 12:56 PM
Pavel,

It does not work as expected.  Yes, the player comes up.  But look at 0:36-0:37 of the screencast.
The controls are there, yes.  Look closely, the maximize button (the four arrows diagonally), does not appear; it seems to be cut off.  

See my earlier post with the picture (player-in-firefox.png), and you'll see what I mean.
0
Zarko
Telerik team
answered on 14 Jul 2014, 01:23 PM
Hi Javier,
Thank you for the detailed explanation. We're able to reproduce the issue but unfortunately it seems that the problem is in the way Firefox displays IFrames - when you use the RadHtmlPlaceholder in windowless mode we place it inside an IFrame that is over the Silverlight plug-in.
In the attached project you can see that if you directly use an IFrame to display the html5tutorial page the issue will present in Firefox (it's fine in IE and Chrome).
Unfortunately at the moment there's not much we can do but if you have further questions feel free to ask.
p.s. After some research we found out that if you add "allowfullscreen" to the IFrame it starts working correctly if Firefox:
<iframe src="http://www.html5tutorial.info/html5-video.php" width="100%" height="100%" allowfullscreen />
You can do this in code behind with something like this:
var iFrame = this.holder.HtmlPresenter.GetProperty("innerHTML").ToString();
iFrame = iFrame.Insert(7, " allowfullscreen");
this.holder.HtmlPresenter.SetProperty("innerHTML", iFrame);


Regards,
Zarko
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
HTMLPlaceHolder
Asked by
Javier
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Javier
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or