HTMLPlaceHolder cuts off HTML5 Player controls in Firefox

7 posts, 0 answers
  1. Javier
    Javier avatar
    7 posts
    Member since:
    Jun 2014

    Posted 27 Jun 2014 Link to this post

    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.
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 02 Jul 2014 Link to this post

    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.
     
  3. DevCraft banner
  4. Javier
    Javier avatar
    7 posts
    Member since:
    Jun 2014

    Posted 08 Jul 2014 in reply to Zarko Link to this post

    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.
  5. Javier
    Javier avatar
    7 posts
    Member since:
    Jun 2014

    Posted 08 Jul 2014 Link to this post

    And let me reiterate, this is not a Flash version of the player, this the native Firefox player in HTML5.
  6. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 10 Jul 2014 Link to this post

    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.
     
  7. Javier
    Javier avatar
    7 posts
    Member since:
    Jun 2014

    Posted 10 Jul 2014 in reply to Pavel R. Pavlov Link to this post

    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.
  8. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 14 Jul 2014 Link to this post

    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.
     
Back to Top
DevCraft banner