CODEWITHSUNDEEP
asp.net
Surya sasidhar
Surya sasidhar

Reputation: 30333

Video Embede code in Div panel? In Asp.net?

In Web application, i am using datalist control to bind the Embed videos to a <div> dynamically. They are coming good, but when we click on video in the datalist they are start to play. I dont want that, I would like to play the particular video in a popup, and make a non action on that video [div which contain embeded video]. I want to make that div enable false.

<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"  OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
  <ItemStyle />
  <ItemTemplate>
    <div id="divVideos" runat="server"><%# Eval("photos") %></div>
    <asp:LinkButton ID="lnkVide" CommandName="Click" runat="server" Text='<%# Eval("videotitle") %>' ToolTip="Play" CommandArgument='<%# Eval("id") %>' Font-Bold="true" ForeColor="Blue"></asp:LinkButton>
  </ItemTemplate>
</asp:DataList>

This is the current code, when a user clicks on the LinkButton a popup will fire and the video will play, but when click on div the video is playing in datalist only, is there any solution?

enter image description here

Upvotes: 2

Views: 1284

Answers (2)

balexandre
balexandre

Reputation: 75113

Well, I would not use that <div> as you are using rather I would make use of the ImageButton that will act as the video image as when clicking you can fire your command and hooking up a javascript event on it you can fire up the popup when you want.

Let's imagine that you can use jQuery with this:

<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"  OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
  <ItemTemplate>
    <asp:ImageButton id="divVideos" CssClass="img-video" runat="server" CommandArgument="<%# Eval("id") %>" data-video-id="<%# Eval("id") %>" CommandName="Click" ImageUrl="<%# Eval("photos") %>" />
    <%# Eval("videotitle") %>
  </ItemTemplate>
</asp:DataList>

and with jQuery you can simply hook up the click event to fire up your pop up and your command

$(function() {
  $(".img-video").on("click", function() {
    var url = 'playVideo.aspx?id=' + $(this).attr("data-video-id");
    window.open(url, "Video Player","menubar=0,resizable=0,width=650,height=450");
    return true; // let the image button fire the command argument
  });
});

But I would never let it fire the Command event here and I would hook up always in the playVideo.aspx page as there you do have the video id as well and you can do what you need in that page without needing to fire the command event on the video strip.

Upvotes: 1

silverfighter
silverfighter

Reputation: 6882

Id am not sure if I did understand you correct but I hope this might help.

If you are using youtub, you'll be able to access a preview picture of the movi in different-sizes.

The image is accessble via a certain convention like this:

 http://img.youtube.com/vi/VIDEO_ID/#.jpg

Find details here: http://www.reelseo.com/youtube-thumbnail-image/

So what I would do is display only the image in the datalist (maybe with some div overlay which looks like a player)... and then on click pass the movi ID to your popup and then embed and play the movie in that popup...div or new window whatever you want..

HTH

Upvotes: 1

Related Questions