locked
How to add video on webform RRS feed

  • Question

  • User-650818078 posted

    I am trying to add video on asp.net web form, I want to be able to add and delete video in the admin page as an administrator. I am not sure how to do this, can somebody help me please? Thanks 

    Tuesday, November 7, 2017 3:13 AM

Answers

  • User347430248 posted

    Hi matthias22,

    -> the easiest way to display video on Web page is by using the Video tag.

    <video controls>
    
        <source src="video example.webm" type="video/webm">
        <source src="video examle.mp4" type="video/mp4">
        <source src="video example.ogg" type="video/ogg">
        your browser doesn't support this video type
    
    </video>

    you can try to hide and show the div for adding and deleting the video.

    or you can store the code in variable and try to append the code in div and when you want to delete it you can try to remove the div.

    for all this you can use JQuery.

    -> another option is to use Media Player control.

    Example:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CS.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
        TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>MediaPlayer Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:MediaPlayer ID="MediaPlayer1" runat="server" Height="240px" Width="320px"
                MediaSkinSource="~/skins/Professional.xaml" MediaSource="~/files/Butterfly.wmv"
                Volume="0.9">
            </asp:MediaPlayer>
        </div>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MediaPlayer1.MediaSource = "~/files/Butterfly.wmv";
        }
    }

    Reference:

    How to add Video in asp.net website

    Play (Embed) WMV Video file in ASP.Net

    -> if you want to use

    JQuery then you can refer example below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var videoPlayer = document.getElementById("ss");
                var video = document.getElementById("myVideo");
                videoPlayer.setAttribute("src", "test2.mp4");
                video.play();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <video id="myVideo" height="400" width="400" autoplay controls>   
            <source id="ss"  type='video/mp4'>
        </video>
        </div>
        </form>
    </body>
    </html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('input[type=file]').change(function () {
                    var fileInput = document.getElementById('fileItem');
                    var files = fileInput.files;
                    var fileURL = URL.createObjectURL(files[0]);
                    document.querySelector('video').src = fileURL;
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="fileItem" type="file" accept="video/*" />
            <br />
            <br />
            <video controls autoplay style="height: 200px; width: 200px;"></video>
        </div>
        </form>
    </body>
    </html>

    Reference:

    Play video from local folder with HTML5 video player using jQuery in ASP.Net    

    Regards

    Deepak

                                                               

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 7, 2017 7:39 AM
  • User1106166016 posted

    If you will check youtube provides a embed code that you can post on the page and adjust it in the area where you want the video to be visible to users. You can refer to this youtube link ... Might come handy

    https://www.youtube.com/watch?v=I4xmX4SBm7M

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 24, 2017 1:10 PM
  • User991499041 posted

    Hi Matthias22,

    I am trying to add video on asp.net web form, I want to be able to add and delete video in the admin page as an administrator. I am not sure how to do this, can somebody help me please? Thanks 

    First, you can upload videos and save them in a database, and use a field to identify the video as valid.

    Second, when you want to delete the video, you just need to update the identity field.

    You can refer to the following examples of uploading and displaying videos.

    Videos Table structure

    ID Int identity
    Video varbinary(MAX)
    Video_Name nvarchar(50)
    Video_Size bigint
    Valid int

    Html Markup

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="BtnUpload" runat="server" Text="Upload" OnClick="BtnUpload_Click" />
    
                <br />
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Panel ID="Panel1" runat="server" Height="126px" Width="881px">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <object id="player"
                                height="300" width="300">
                                <param name="url"
                                    value='<%# "VideoHandler.ashx?id=" + Eval("ID") %>' />
                                <param name="showcontrols" value="true" />
                                <param name="autostart" value="true" />
                            </object>
                        </ItemTemplate>
                    </asp:Repeater>
                </asp:Panel>
    
    
            </div>
        </form>
    </body>

    Save Data in DataBase. Here  data may be Video file, Image file or audio file. On click event of upload button write down the following code.

    protected void Page_Load(object sender, EventArgs e)
    {
    
    }
    
    
    byte[] buffer;
    SqlConnection connection;
    protected void BtnUpload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile && FileUpload1.PostedFile != null
               && FileUpload1.PostedFile.FileName != "")
        {
           HttpPostedFile file = FileUpload1.PostedFile;
           //retrieve the HttpPostedFile object
           buffer = new byte[file.ContentLength];
           int bytesReaded = file.InputStream.Read(buffer, 0,
           FileUpload1.PostedFile.ContentLength);
           if (bytesReaded > 0)
           {
                try
                {
                   connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
                  SqlCommand cmd = new SqlCommand
                    ("INSERT INTO Videos (Video, Video_Name, Video_Size)" +
                     " VALUES (@video, @videoName, @videoSize)", connection);
                   cmd.Parameters.Add("@video",
                        SqlDbType.VarBinary, buffer.Length).Value = buffer;
                   cmd.Parameters.Add("@videoName",
                        SqlDbType.NVarChar).Value = FileUpload1.FileName;
                   cmd.Parameters.Add("@videoSize",
                        SqlDbType.BigInt).Value = file.ContentLength;
                   using (connection)
                   {
                        connection.Open();
                        cmd.ExecuteReader();
                        Label1.Text = "uploaded";
                   }
                }
                catch (Exception ex)
                {
                    Label1.Text = ex.Message.ToString();
                }
                finally
                {
                    connection.Close();
                }
           }
        }
        else
        {
            Label1.Text = "Choose a valid video file";
        }
    }

    This handler is going to retrieve data from database.

    VideoHandler.ashx

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    
    namespace WebFormDemo
    {
        /// <summary>
        /// Summary description for VideoHandler
        /// </summary>
        public class VideoHandler : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
                SqlCommand cmd = new SqlCommand("SELECT Video, Video_Name FROM Videos WHERE ID = @id", connection);
                cmd.Parameters.Add("@id", SqlDbType.Int).Value = context.Request.QueryString["id"];
                try
                {
                    connection.Open();
                    SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.Default);
                    if (reader.HasRows)
                    {
                        while (reader.Read())
                        {
                            context.Response.ContentType = reader["Video_Name"].ToString();
                            context.Response.BinaryWrite((byte[])reader["Video"]);
                        }
                    }
                }
                finally
                {
                    connection.Close();
                }
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

    Show Video on Page

    private DataTable GetSpecificVideo(object i)
    //pass the id of the video
    {
       connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
       SqlDataAdapter adapter = new SqlDataAdapter("SELECT Video, ID " +
                                         "FROM Videos WHERE ID = @id", connection);
       adapter.SelectCommand.Parameters.Add("@id", SqlDbType.Int).Value = (int)i;
       DataTable table = new DataTable();
       adapter.Fill(table);
       return table;
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
       int id = Convert.ToInt32(TextBox1.Text);
       Repeater1.DataSource = GetSpecificVideo(id);
       Repeater1.DataBind();
    }

    Upload Video File, Audio File and Image File in SQL Server DB

    http://www.c-sharpcorner.com/blogs/upload-video-file-audio-file-and-image-file-in-sql-server-db1

    Regards,

    zxj

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 28, 2017 7:22 AM

All replies

  • User347430248 posted

    Hi matthias22,

    -> the easiest way to display video on Web page is by using the Video tag.

    <video controls>
    
        <source src="video example.webm" type="video/webm">
        <source src="video examle.mp4" type="video/mp4">
        <source src="video example.ogg" type="video/ogg">
        your browser doesn't support this video type
    
    </video>

    you can try to hide and show the div for adding and deleting the video.

    or you can store the code in variable and try to append the code in div and when you want to delete it you can try to remove the div.

    for all this you can use JQuery.

    -> another option is to use Media Player control.

    Example:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CS.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
        TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>MediaPlayer Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:MediaPlayer ID="MediaPlayer1" runat="server" Height="240px" Width="320px"
                MediaSkinSource="~/skins/Professional.xaml" MediaSource="~/files/Butterfly.wmv"
                Volume="0.9">
            </asp:MediaPlayer>
        </div>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MediaPlayer1.MediaSource = "~/files/Butterfly.wmv";
        }
    }

    Reference:

    How to add Video in asp.net website

    Play (Embed) WMV Video file in ASP.Net

    -> if you want to use

    JQuery then you can refer example below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var videoPlayer = document.getElementById("ss");
                var video = document.getElementById("myVideo");
                videoPlayer.setAttribute("src", "test2.mp4");
                video.play();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <video id="myVideo" height="400" width="400" autoplay controls>   
            <source id="ss"  type='video/mp4'>
        </video>
        </div>
        </form>
    </body>
    </html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('input[type=file]').change(function () {
                    var fileInput = document.getElementById('fileItem');
                    var files = fileInput.files;
                    var fileURL = URL.createObjectURL(files[0]);
                    document.querySelector('video').src = fileURL;
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="fileItem" type="file" accept="video/*" />
            <br />
            <br />
            <video controls autoplay style="height: 200px; width: 200px;"></video>
        </div>
        </form>
    </body>
    </html>

    Reference:

    Play video from local folder with HTML5 video player using jQuery in ASP.Net    

    Regards

    Deepak

                                                               

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 7, 2017 7:39 AM
  • User1106166016 posted

    If you will check youtube provides a embed code that you can post on the page and adjust it in the area where you want the video to be visible to users. You can refer to this youtube link ... Might come handy

    https://www.youtube.com/watch?v=I4xmX4SBm7M

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 24, 2017 1:10 PM
  • User991499041 posted

    Hi Matthias22,

    I am trying to add video on asp.net web form, I want to be able to add and delete video in the admin page as an administrator. I am not sure how to do this, can somebody help me please? Thanks 

    First, you can upload videos and save them in a database, and use a field to identify the video as valid.

    Second, when you want to delete the video, you just need to update the identity field.

    You can refer to the following examples of uploading and displaying videos.

    Videos Table structure

    ID Int identity
    Video varbinary(MAX)
    Video_Name nvarchar(50)
    Video_Size bigint
    Valid int

    Html Markup

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="BtnUpload" runat="server" Text="Upload" OnClick="BtnUpload_Click" />
    
                <br />
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Panel ID="Panel1" runat="server" Height="126px" Width="881px">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <object id="player"
                                height="300" width="300">
                                <param name="url"
                                    value='<%# "VideoHandler.ashx?id=" + Eval("ID") %>' />
                                <param name="showcontrols" value="true" />
                                <param name="autostart" value="true" />
                            </object>
                        </ItemTemplate>
                    </asp:Repeater>
                </asp:Panel>
    
    
            </div>
        </form>
    </body>

    Save Data in DataBase. Here  data may be Video file, Image file or audio file. On click event of upload button write down the following code.

    protected void Page_Load(object sender, EventArgs e)
    {
    
    }
    
    
    byte[] buffer;
    SqlConnection connection;
    protected void BtnUpload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile && FileUpload1.PostedFile != null
               && FileUpload1.PostedFile.FileName != "")
        {
           HttpPostedFile file = FileUpload1.PostedFile;
           //retrieve the HttpPostedFile object
           buffer = new byte[file.ContentLength];
           int bytesReaded = file.InputStream.Read(buffer, 0,
           FileUpload1.PostedFile.ContentLength);
           if (bytesReaded > 0)
           {
                try
                {
                   connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
                  SqlCommand cmd = new SqlCommand
                    ("INSERT INTO Videos (Video, Video_Name, Video_Size)" +
                     " VALUES (@video, @videoName, @videoSize)", connection);
                   cmd.Parameters.Add("@video",
                        SqlDbType.VarBinary, buffer.Length).Value = buffer;
                   cmd.Parameters.Add("@videoName",
                        SqlDbType.NVarChar).Value = FileUpload1.FileName;
                   cmd.Parameters.Add("@videoSize",
                        SqlDbType.BigInt).Value = file.ContentLength;
                   using (connection)
                   {
                        connection.Open();
                        cmd.ExecuteReader();
                        Label1.Text = "uploaded";
                   }
                }
                catch (Exception ex)
                {
                    Label1.Text = ex.Message.ToString();
                }
                finally
                {
                    connection.Close();
                }
           }
        }
        else
        {
            Label1.Text = "Choose a valid video file";
        }
    }

    This handler is going to retrieve data from database.

    VideoHandler.ashx

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    
    namespace WebFormDemo
    {
        /// <summary>
        /// Summary description for VideoHandler
        /// </summary>
        public class VideoHandler : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
                SqlCommand cmd = new SqlCommand("SELECT Video, Video_Name FROM Videos WHERE ID = @id", connection);
                cmd.Parameters.Add("@id", SqlDbType.Int).Value = context.Request.QueryString["id"];
                try
                {
                    connection.Open();
                    SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.Default);
                    if (reader.HasRows)
                    {
                        while (reader.Read())
                        {
                            context.Response.ContentType = reader["Video_Name"].ToString();
                            context.Response.BinaryWrite((byte[])reader["Video"]);
                        }
                    }
                }
                finally
                {
                    connection.Close();
                }
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

    Show Video on Page

    private DataTable GetSpecificVideo(object i)
    //pass the id of the video
    {
       connection = new SqlConnection("Data Source=.;Initial Catalog=xxx;User Id=xxx;Password=xxx");
       SqlDataAdapter adapter = new SqlDataAdapter("SELECT Video, ID " +
                                         "FROM Videos WHERE ID = @id", connection);
       adapter.SelectCommand.Parameters.Add("@id", SqlDbType.Int).Value = (int)i;
       DataTable table = new DataTable();
       adapter.Fill(table);
       return table;
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
       int id = Convert.ToInt32(TextBox1.Text);
       Repeater1.DataSource = GetSpecificVideo(id);
       Repeater1.DataBind();
    }

    Upload Video File, Audio File and Image File in SQL Server DB

    http://www.c-sharpcorner.com/blogs/upload-video-file-audio-file-and-image-file-in-sql-server-db1

    Regards,

    zxj

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 28, 2017 7:22 AM