+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Video player in custom control

Video player in custom control

18 posts, 1 answered
  1. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    03 Jul 2013
    Link to this post
    I  have been tasked with creating a custom control in Visual Studio 2010 for use on a sitefinity implementation.  One of the requirements is that the custom control play a video.  Can anyone tell me how I can add the media player from sitefinity to the ascx file of my custom control and play a movie that is part of the data module I have created for the site in sitefinity?  Sample code would be much appreciated.
    Thanks very much,
    Bill
  2. Victor
    Victor avatar
    94 posts
    Registered:
    15 Jun 2011
    03 Jul 2013 in reply to Bill
    Link to this post
    We just finished an application using video, and this was the best (performing, ease of development, ..) things we came across.  You can drop this on an MVC view and bind the different properties right to the model.

    http://www.videojs.com/
  3. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    03 Jul 2013 in reply to Victor
    Link to this post
    Thanks for the reply, but I was hoping to use the media player that comes with sitefinity.
  4. Svetla
    Svetla avatar
    36 posts
    Registered:
    07 Sep 2015
    03 Jul 2013
    Link to this post
    Hi Bill,

    If you look at the current video detail template, you can see that the control for that is called MediaPlayerControl and you can add it in any ascx markup:

    <sf:MediaPlayerControl ID="videoControl" runat="server" MediaContentId="Guid of the video"/>

    You need to register your prefix like this:

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


    Also if you add a property of type GUID to bind to, you can easily add a friendly UI selector for that by generating a designer using Thunder, it is capable of adding your video selector for the back-end edit screen of the widget. Follow the docs here for more information.

     Hope this helps!

    Regards,
    Svetla
    Telerik
    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
  5. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    08 Jul 2013
    Link to this post
    Sorry it took me so long to reply to your feedback.  I have been away due to the July 4th holiday here.

    Thank you for the information.  Very helpful.  I have never worked with Sitefinity before and this is a little challenging for me.

    If I may ask some additional questions?
    My code behind is in VB.  When setting up the property in my code behind for the video player.  What Type is the media player.  My current code uses object as the type for the move player.With this I get no intellisense.  I assume I need to set this to the proper type rather that just using Object. 

    My current import list is:
    System
    System.Collections.Generic
    System.ComponentModel
    System.Text
    System.Web
    System.Web.UI
    System.Web.UI.WebControls
    System.IO
    System.Web.Security
    System.Text.RegularExpressions
    System.Linq

    Telerik.Sitefinity
    Telerik.Sitefinity.DynamicModules
    Telerik.Sitefinity.Model
    Telerik.Sitefinity.Web.UI
    Telerik.Web.UI
    Telerik.Sitefinity.Security
    Telerik.Sitefinity.Security.Model
    Telerik.Sitefinity.Data.Linq.Dynamic
    Telerik.Sitefinity.DynamicModules.Model
    Telerik.Sitefinity.GenericContent.Model
    Telerik.Sitefinity.Utilities.TypeConverters
    Telerik.Sitefinity.Lifecycle
    Telerik.Sitefinity.Taxonomies
    Telerik.Sitefinity.Taxonomies.Model

    Telerik.Sitefinity.Modules.Libraries

    Do I need another for this control?

    Thank you  very much.
  6. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    08 Jul 2013
    Link to this post
    Sorry it took me so long to reply to your feedback.  I have been away due to the July 4th holiday here.
    Thank you for the information.  Very helpful.  I have never worked with Sitefinity before and this is a little challenging for me.
    If I may ask some additional questions?
    How do I get intelli_sense to work in my vb code behind?  Also, the movie does not play so I am sure I am missing something basic. 
    In my property in the code behind for the player I am using a type of "Object"  is this OK?  If not what type should I use and what imports lines do I need?
    Thank you  very much.
  7. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    08 Jul 2013
    Link to this post
    Sorry it took me so long to reply to your feedback.  I have been away due to the July 4th holiday here.

    If I may ask some additional questions?
    How do I get intelli_sense to work in my vb code behind?  Also, the movie does not play so I am sure I am missing something basic. 
    In my property in the code behind for the player I am using a type of "Object"  is this OK?  If not what type should I use and what imports lines do I need?
    Thank you  very much.
  8. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    08 Jul 2013
    Link to this post
    Hello All,

       I managed to get the video to play.  Thanks for all of the help.  The remaining issue is that I need to disable the scrollbar that allows for rewinding and fast forwarding the movie.  Is this possible? If it is how can I accomplish it in VB?

    Thanks Again.
  9. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    10 Jul 2013
    Link to this post
    Still no luck on this.  Can anyone give me any ideas on how to:

    1.  Detect when the media playing in the MediaPlayerControl  has completed.
    2.  Hide or disable the scroll bar and fast forward buttons?

    These are both customer requirements and I am getting nowhere fast.

    Thanks
  10. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    10 Jul 2013
    Link to this post
    Here is my entire ascx file

    <%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Videos" Assembly="Telerik.Sitefinity" %>
    <%@ Register assembly="System.Web.Silverlight" namespace="System.Web.UI.SilverlightControls" tagprefix="asp" %>

    <style type="text/css">
    .lblLectureTitle
    {
    font-family:Verdana;
    font-size:medium;
    color:Blue;
    }
    .ErrorStyle
    {
    font-family:Verdana;
    font-size:large;
    color:Red;
    }
    </style>

    <sitefinity:ResourceLinks id="resourcesLinks" runat="server">
    <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Silverlight.js" Static="true" />
    </sitefinity:ResourceLinks>

    <center>

    <p align="center">
    <font face="Verdana" size="3">
    If you encounter problems with viewing the online&#160;lectures, please contact
    </font>
    <a href="mailto:xxxx@xxxx.com?subject=Online%20lecture%20question">
    <font face="Verdana" color="#e78785" size="3">
    someone else
    </font>
    </a>
    <font face="Verdana" size="3">
    by e-mail or by calling XXX-XXX-XXXX xXX from 9:00 am - 5:00 pm EST, Monday-Friday.
    </font>
    </p>

    <asp:Panel ID="pnlLecture" runat="server">
    <br />
    <asp:Label ID="lblLectureTitle" runat="server" Text="" CssClass="lblLectureTitle"></asp:Label>
    <br /><asp:Label ID="Label2" runat="server" Text="" CssClass="lblLectureTitle"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="pnlLectureMovie" runat="server" HorizontalAlign="Center">
    <br />

    <sf:MediaPlayerControl ID="ctlLectureMovie" runat="server" Width="900" Height="650" />
    <br />
    <asp:Button ID="btnTakeQuiz" runat="server" Text="Take Quiz" />
    </asp:Panel>


    </center>

    <asp:Panel ID="pnlQuestionsAndAnswers" runat="server">
    <br />
    </asp:Panel>

    <asp:Panel ID="pnlQuizResults" runat="server">
    <asp:Label ID="lblQuizResultsHeader" runat="server" Text="Quiz Results" CssClass="lblLectureTitle"></asp:Label>
    <br />
    </asp:Panel>

    <asp:Panel ID="pnlQuizHistory" runat="server">
    <asp:Label ID="lblQuizHistoryHeader" runat="server" Text="Quiz Taker" CssClass="lblLectureTitle"></asp:Label>
    <br />
    </asp:Panel>

    <asp:Panel ID="Panel1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Modular Quiz" CssClass="lblLectureTitle"></asp:Label>
    <br />
    </asp:Panel>

    By the way, in VS the MediaPlayerControl is underlined in green and when moused over it says "MediaPlayerControl is not a known element."
  11. Victor
    Victor avatar
    94 posts
    Registered:
    15 Jun 2011
    10 Jul 2013
    Link to this post
    As far as I know, the sfmediacontrol does not expose any of the events of the underlying Silverlight Control.  You could use the underlying rad control itself, but you'd have to configure it.

    I spent a week banging my head of this, and finally setup the HTML5 solution in hours.
  12. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    11 Jul 2013
    Link to this post
    I have created a support ticket on this.  Ticket number is 714873: Subject: sf:MediaPlayerControl - Hide media control items and detect MediaEnded
    Answered
  13. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    19 Jul 2013 in reply to Victor
    Link to this post
    Victor,

       Any chance you could let me see some code for this?

    Thanks,
    Bill
  14. Victor
    Victor avatar
    94 posts
    Registered:
    15 Jun 2011
    21 Jul 2013
    Link to this post
    Here is the front-end setup.

    Let me know what you're looking for as far as the "back-end" code goes and I will post something.
  15. Victor
    Victor avatar
    94 posts
    Registered:
    15 Jun 2011
    21 Jul 2013 in reply to Bill
    Link to this post
    Here is the front-end setup.
    https://github.com/videojs/video.js/blob/master/docs/setup.md

    Let me know what you're looking for as far as the "back-end" code goes and I will post something.  (i.e. multiple videos, screen posters, etc...)
  16. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    22 Jul 2013
    Link to this post
    Victor,

       Thank you very much!!!!

    Bill
  17. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    22 Jul 2013
    Link to this post
    Victor,
       Thank you very much.
    Bill
  18. Bill
    Bill avatar
    31 posts
    Registered:
    08 Apr 2013
    22 Jul 2013 in reply to Victor
    Link to this post
    Thank you very much
18 posts, 1 answered