Lightbox for video not rendered properly on first click

Posted by Community Admin on 28-Sep-2012 00:00

Hi,

When you use the default widget for displaying videos within a video library or album, option list + lightbox. In live view when you click on a video thumbnail the popup with the lightbox video player does not display properly the first time you click. If you close it and click again then the video displays properly, in other words, the player is correctly rendered the second time in the pop-up. That's about the bug.

Now I have a question how can I replace the player control (<sf:MediaPlayerControl ID="videoControl" runat="server" />) which is in the template with my own implementation of a player. I have adapted the exemple of Html5videoplayer to make it work in Sitefinity 5.1 and corrected the code of the front end which now matches the current working version of the video js player. And I would like to use that one instead of the MediaPlayerControl.

Thanks in advance,

Ivan

Posted by Community Admin on 01-Oct-2012 00:00

Hi Ivan,

Thank you for contacting us.

The problem appears only in firefox after version 12 and it is connected with a style rule not correctly set when the lightbox dialog is opened.
In the holding <div> element of the video player window

<div id="fancybox-inner" style="top: 10px; left: 10px; width: 500px; height: 35px; overflow: visible;">

the height is set to be 35 px instead of 435px which is the correct value.
Here is a link for this bug in PITS.

I have updated your Telerik points for reporting the bug.

To substitute the MediaPlayerControl with completely different control will not work as the new control has a tricky approach. Let me elaborate on this the MediaPlayerControl is bound with the whole video gallery control as the control itself doesn`t bind to the videos it must show.

The MediaPlayerControl containes a contaner for the silverlight player and it tightly bound to that player. You can add new player and bind it to the videos trough javascript as it is done in the MediaPlayerControl.
For the purpose customize the MediaPlayerControl.
1.Create a user control and paste the template of the media player control.

<%@ Control Language="C#" %>

<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>

<sitefinity:ResourceLinks id="resourcesLinks" runat="server">

<sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Silverlight.js" Static="true" />

</sitefinity:ResourceLinks>

<div id="silverlightContainer" class="sfvideoWrp" runat="server"/>

<sf:BrowseAndEditToolbar ID="MediaPlayerBrowseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>

In the silverlight container or in new container add another video player. Preventing the current silverligh player from working is done trough the class that will manage this templte.

2. Create a class to manage the template of the MediaPlayerControl. This class will inherit from MediaPlayerControl. I have exposed all the properties of the control. The loading is done OnPrerender

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Videos;

using System.Web.UI;

using Telerik.Sitefinity.Web;

namespace SitefinityWebApp

public class MediaPlayerCustomizations : MediaPlayerControl

#region Control Properties

//gets the link to the video to display

public string MediaUrl get; set;

public string MediaTitle get; set;

public string MediaDescription get; set;

public bool AutoPlay get; set;

public string SilverlightPlayerSkin get; set;

public Guid MediaContentId get; set;

public bool SetSilverlightContainerVisibility

get

return this.setSilverlightContainerVisibility;

set

this.setSilverlightContainerVisibility = value;

//get the template of this class

public override string LayoutTemplatePath

get

return MediaPlayerCustomizations.TemplatePath;

set

base.LayoutTemplatePath = value;

#endregion

protected override void OnPreRender(EventArgs e)

base.OnPreRender(e);

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var descriptors = new List<ScriptDescriptor>();

if (this.SilverlightContainer.Visible)

var descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);

descriptor.AddProperty("_domain", UrlPath.GetDomainUrl());

descriptor.AddProperty("url", this.MediaUrl);

descriptor.AddProperty("title", this.MediaTitle);

descriptor.AddProperty("description", this.MediaDescription);

descriptor.AddProperty("autoPlay", this.AutoPlay);

descriptor.AddProperty("_silverlightUrl", VirtualPathUtility.ToAbsolute(MediaPlayerCustomizations.SilverlightUrl));

descriptor.AddElementProperty("playerContainer", this.SilverlightContainer.ClientID);

descriptor.AddProperty("width", this.Width.ToString());

descriptor.AddProperty("height", this.Height.ToString());

descriptor.AddProperty("_silverlightSkin", this.SilverlightPlayerSkin);

descriptors.Add(descriptor);

return descriptors;

public override IEnumerable<ScriptReference> GetScriptReferences()

var scripts = new List<ScriptReference>();

scripts.Add(new ScriptReference(Script, "SitefintiyWebApp"));

return scripts;

#region Constants

internal const string SilverlightUrl = "~/ClientBin/Telerik.Sitefinity.Silverlight.xap";

internal const string Script = "SitefinityWebApp.MediaPlayerControl.js";

private bool setSilverlightContainerVisibility = true;

public static readonly string TemplatePath = "~/VirtualPath/SitefinityWebApp.MediaPlayerControlCustomizations.ascx";

#endregion

3. Set the build action of the template created in step1 to EmbeddedResource (right click the template ->Options->Build action). The embedded template is loaded trough virtual path in line

public static readonly string TemplatePath = "~/VirtualPath/SitefinityWebApp.MediaPlayerControlCustomizations.ascx";

The virtual path is ~/VirtualPath/. To load the template from it register a virtual path in Administration->Settings->Advanced->VirtualPathSettings->VirtualPaths->(Create New)->
ResourceLocation: SitefinityWebApp (the assembly where the class is located)
VirtualPaht: ~/VirtualPath/*
ResolverType: EmbeddedResourceResolver

Save changes and restart the application for the virtual path to become active.

Substiture the built in control with the customized one by editing the template of the Video Gallery widget and instead of loading

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Videos" Assembly="Telerik.Sitefinity" %>

<sf:MediaPlayerControl ID="videoControl" runat="server" />

load the customized Control from the namespace of the project assembly.

<%@ Register TagPrefix="sf" Namespace="SitefinityWebApp.VideoCustomizations" Assembly="SitefinityWebApp" %>

<sf:MediaPlayerControl ID="videoControl" runat="server" />

Another approach which I think is cleaner is to create user control for displaying video gallery and bind Repeater to a datasource of videos (retreived with the video libraries API) in sitefinity. In the ItemTemplate of the new control pass the video URL to a desired video player.

All the best,
Stanislav Velikov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 01-Oct-2012 00:00

I've tried your suggested approach but it still doesn't fix the problem. I tried adding a Css !important width 435px but it still isn't doing the trick. I think the real issue lies somewhere around the initialization of the fancyBox. There is an event exposed in the fancyBox called afterShow which can call a function to initialize the loading of the content. But we don't have access to the javascript initializing the fancybox.

Another issue with the fancybox is that if you click on the close X icon on the top right corner it closes the box but doesn't stop the player, you have to make sure you stop the player before closing manually.

I am also missing a loading animation sometimes you have to wait a long time before the video starts playing, it would have been nice to have a little loading animation that lets the viewer knowing something is going on and not to get him thinking the whole thing doesn't work.

I am starting to do the whole widget from scratch, I tried to implement just replacing your fancybox set up with my own but I am running into problems when I want to hook it up correctly to each video displayed on the page. So probably the simplest is to do it all from scratch that way I will be able to set up another player than the silverlight one which is kind of slow in the initialization phase.

Thanks,

Ivan

Posted by Community Admin on 02-Oct-2012 00:00

Hi Ivan,

Excuse me if my previous reply was confusing adding !important rule will not fix the problem as the lightbox css is not loaded to the page when the page is requested, but loads on demand when you click a thumbnail for a video. The dialog that opens loads a css file embedded to the lightbox popup and thus changing the css rule on the page doesn`t affect it.

Thank you for reporting this problem with closing the lightbox doesn`t stop the video.
This is because the lightbox is just a container of the silverlight video player and doesn`t intercept it.
I have logged this bug, here is the link for the bug in PITS.

The silverligh player will be substituted with another player that will be more customizable in future releases of Sitefinity.

Greetings,
Stanislav Velikov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 02-Oct-2012 00:00

I have implemented my own solution for it, also using the FancyBox (but the latest version of it) along with the JW Player in a separate widget. I can share with you my implementation, although it might not be the best suited for commercial projects that would need to acquire a license for JW Player. Only non-commercial projects can use this for free.

This is the front end of the user-control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SingleAlbumView.ascx.cs" Inherits="SitefinityWebApp.CustomWidgets.VideoAlbum.SingleAlbumView" %>

<input id="fileUrl" type="hidden" />

<input id="thumbnailUrl" type="hidden" />

<telerik:RadListView ID="RadListViewSingleAlbum" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

<LayoutTemplate>

<ul class="sfvideosTmbList sfTmbDetailsMode">

<asp:PlaceHolder ID="ItemsContainer" runat="server"/>

</ul>

</LayoutTemplate>

<ItemTemplate>

<li class="sfvideoTmb sfFilmFrame">

<a

onclick='javascript:ChHdVal("<%# DataBinder.Eval(Container.DataItem, "ItemDefaultUrl") %>", "<%# DataBinder.Eval (Container.DataItem, "ThumbnailUrl") %>");return;' href="#<%# DataBinder.Eval (Container.DataItem, "Id") %>" title='<%# DataBinder.Eval (Container.DataItem, "Title") %>' class="fancybox"><

img alt="" src='<%# DataBinder.Eval (Container.DataItem, "ThumbnailUrl") %>' /></a>

<div id="<%# DataBinder.Eval (Container.DataItem, "Id") %>" style='display:none'>

<script type="text/javascript">

var file;

var thumb;

var link;

var code;

function ChHdVal(fileUrl, thumburl)

document.getElementById("fileUrl").value = "/Web" + fileUrl + ".mp4";

document.getElementById("thumbnailUrl").value = thumburl;

file = document.getElementById("fileUrl").value;

thumb = document.getElementById("thumbnailUrl").value;

link = document.location.href;

jq17(window).load(function ()

jq17("a.fancybox").fancybox(

'content': '<div id="mediaplayer">Test</div>',

maxWidth: 650,

maxHeight: 370,

fitToView: false,

width: 640,

height: 360,

autoSize: false,

closeClick: false,

openEffect: 'none',

closeEffect: 'none',

afterShow: function ()

jwplayer('mediaplayer').setup(

'id': 'playerID',

'width': '640',

'height': '360',

'file': file.toString(),

'image': thumb.toString(),

'skin': '/Web/CustomWidgets/VideoAlbum/js/nature01.zip',

'modes': [

type: 'html5' ,

type: 'flash', src: '/Web/CustomWidgets/VideoAlbum/js/player.swf' ,

type: 'download'

],

'plugins':

'sharing-3':

'link': link,

'heading': 'Share this video page'

);

</script>

</div>

</li>

</ItemTemplate>

</telerik:RadListView>

This is the code-behind part:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity;

using Telerik.Sitefinity.Data;

using Telerik.Sitefinity.Libraries.Model;

using Telerik.Sitefinity.Modules.GenericContent;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Taxonomies;

using Telerik.Sitefinity.Taxonomies.Model;

using Telerik.Sitefinity.Utilities.TypeConverters;

using Telerik.Web.UI;

using System.Collections.Specialized;

using System.Web.UI.HtmlControls;

using Telerik.Sitefinity.Web.UI.ControlDesign;

using Telerik.Sitefinity.GenericContent.Model;

namespace SitefinityWebApp.CustomWidgets.VideoAlbum

public partial class SingleAlbumView : System.Web.UI.UserControl

protected void Page_Load(object sender, EventArgs e)

if (Page.Request.Params["gd"] != null)

Guid videoalbumGuid = Guid.Parse(Page.Request.Params["gd"]);

if (!IsPostBack)

var videos = GetVideosByVideoLibraryFluentAPI(videoalbumGuid);

RadListViewSingleAlbum.DataSource = videos;

RadListViewSingleAlbum.DataBind();

LibrariesManager librariesManager = LibrariesManager.GetManager();

VideoLibrary thisalbum = librariesManager.GetVideoLibrary(videoalbumGuid);

Page.Title = "Audio Video Gallery" + " " + thisalbum.Title.ToString();

public static IQueryable<Video> GetVideosByVideoLibraryFluentAPI(Guid videoLibraryId)

return App.WorkWith().VideoLibrary(videoLibraryId).Videos().Where(d => d.Status == ContentLifecycleStatus.Live).Get();

Attached are the javascript and css files needed by FancyBox and JW Player.

In the page holding the widget you need also to set up the following instructions in the head tag, by going on Actions: Title & Properties:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>

var jq17 = jQuery.noConflict();

</script>

<link rel="stylesheet" href="/Web/CustomWidgets/VideoAlbum/js/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />

<script type="text/javascript" src="/Web/CustomWidgets/VideoAlbum/js/jquery.fancybox.pack.js?v=2.1.1"></script>

<script type='text/javascript' src='/Web/CustomWidgets/VideoAlbum/js/jwplayer.js'></script>

I also added a CSS rule to display a Movie Frame around each video:

.sfFilmFrame

background: url("/Web/App_Themes/DSWeb/Images/filmframe.png") no-repeat 0 0 !important;

margin: 5px;

Finally i am also attaching the image used for the Film Frame background. Here you don't get any problems with the rendering of the popup in any of the main browsers I have tried, and JW Player gives you tons of possible configuration options, in my example you have 3 modes setup that are automatically processed in the order they are configured if one option is not available the player tries the next one, if the browser is too old it will give a download option in last resort.

I hope this can be useful to others too,

Ivan

[View:/cfs-file/__key/communityserver-discussions-components-files/295/e6e4772f_2D00_5b7e_2D00_4d02_2D00_9035_2D00_cc65aa7d35f4_5F00_playerandfancybox.zip:320:240]

Posted by Community Admin on 03-Oct-2012 00:00

Hi Ivan,

Thank you for this is very good solution to the problem this will be most useful to the community in sitefinity forums so if I have your permission I can make this ticket a forum thread where everyone can benefit from your solution?

All the best,
Stanislav Velikov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 03-Oct-2012 00:00

Of course you have my permission, it's more than a pleasure for me to contribute anyway I can. I am really grateful to all of you for the great work you are doing,

Ivan

This thread is closed

All Replies