how to play video file or YouTube video in ASP.Net Application ~ Asp .Net Solution Kirit Kapupara

Description:-

in this example we explain that how to play video in asp.net by using Html5 Video control. by using this example you can also set the volume of video previous and next video or all other functionality etc..

First you have to Create a Table in database like

we provide same Functionality Same like Youtube Video.in which there are number of Video are Display in Row Format when you click on this Video the Video is play same like You tube.

Here we Define Javascript Function in which all Functionality are availabe like Pause Video,play Video,increase or decrease Volume,previous or Next Video etc…

We Display video in DataList Control in which we Define three Video in Each row and provide next and previous Facility.

You also use this type of facility to Display your Video to your User and you can also give facility for Download or upload video.

To upload video in Database please Click Here How to Upload Video File in databse in Asp.Net

to show example of how to send SMS in asp.net click here Send SMS to user in asp.net

to show example of send Email in asp.net click here send Email with Attechment in asp.net

to show example of Export Gridview data to PDF in asp.net click here Export gridview data to PDF

music.aspx:-

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="music.aspx.cs" Inherits="music" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

.i1

{

position:absolute;

left:185px;

}

.i2

{

position:absolute;

left:565px;

top:350px;

}

a.test

{

width:11em;

float:right;

}

</style>

function playPause() {

var myVideo = document.getElementById("Video1");

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig() {

myVideo.width = 560;

}

function makeSmall() {

myVideo.width = 320;

}

function makeNormal() {

myVideo.width = 420;

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:DataList ID="DataList1" runat="server"

Width="446px" BackColor="White"

BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"

Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"

GridLines="Horizontal" AllowPaging="True" PageSize="1">

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>'></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

<center style="color:Lime; background-color: #000000; font-size: large; text-decoration: blink;"><b>Top Tracks</b></center>

<asp:DataList ID="DataList2" runat="server" RepeatColumns="3"

Width="600px" BackColor="White"

BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"

Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"

GridLines="Horizontal" AllowPaging="True" PageSize="1"

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="189"></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

<center style="color:Lime; font-size: large; background-color: #000000; text-decoration: blink;"><b>Music</b></center>

<asp:DataList ID="DataList5" runat="server" RepeatColumns="3"

Width="600px" BackColor="White"

BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"

Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"

GridLines="Horizontal" AllowPaging="True" >

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="185"></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

<center style="color:Lime; font-size: large; text-decoration: blink; background-color: #000000;"><b>Sport</b></center>

<asp:DataList ID="DataList6" runat="server" RepeatColumns="3"

Width="600px" BackColor="White"

BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"

Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"

GridLines="Horizontal" AllowPaging="True" >

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="185"></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

<asp:DataList ID="DataList3" runat="server" RepeatColumns="1"

Width="370px" BackColor="White"

BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"

Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"

GridLines="Horizontal" AllowPaging="True" pagesize="3" Height="239px"

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video> <a href="#" class="test">

<asp:Label ID="Label1" Width="189" runat="server" Text='<%# Eval("Video_Name") %>'></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

<asp:DataList ID="DataList4" runat="server" RepeatColumns="1"

onselectedindexchanged="DataList4_SelectedIndexChanged" Width="221px"

<% Response.TransmitFile("HTMLPage.htm"); %>

<source src='<%# Eval("Video_Name") %>' type="video/mp4">

<source src='<%# Eval("Video_Name") %>' type="video/ogg">

</video>

<asp:Label ID="Label1" Width="189" runat="server" Text='<%# Eval("Video_Name") %>'></asp:Label></a>

</ItemTemplate>

</asp:DataList>

</div>

</asp:Content>

music.aspx.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;

public partial class music : System.Web.UI.Page

{

PagedDataSource pagedData = new PagedDataSource();

int CurPage = 1;

protected void Page_Load(object sender, EventArgs e)

{

doPaging();

}

public DataTable d1()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 't' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

public DataTable d2()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 'top' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

public DataTable d3()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 'top' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

public DataTable d4()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 'tz' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

public DataTable d5()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 'tmusic' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

public DataTable d6()

{

string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

string q1 = "select * from video where category = 'tsport' ";

DataSet ds = new DataSet();

SqlConnection cn = new SqlConnection(con);

SqlCommand cmd = new SqlCommand(q1, cn);

SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "video");

return ds.Tables[0];

}

void doPaging()

{

pagedData.DataSource = d1().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 1;

DataList1.DataSource = pagedData;

DataList1.DataBind();

pagedData.DataSource = d2().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 3;

DataList2.DataSource = pagedData;

DataList2.DataBind();

pagedData.DataSource = d3().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 3;

DataList3.DataSource = pagedData;

DataList3.DataBind();

pagedData.DataSource = d4().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 5;

DataList4.DataSource = pagedData;

DataList4.DataBind();

pagedData.DataSource = d5().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 3;

DataList5.DataSource = pagedData;

DataList5.DataBind();

pagedData.DataSource = d6().DefaultView;

pagedData.AllowPaging = true;

pagedData.PageSize = 3;

DataList6.DataSource = pagedData;

DataList6.DataBind();

}

public string swfFileName;

protected void add(object sender, EventArgs e)

{

swfFileName = ((LinkButton)sender).CommandArgument;

//Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage - 1));

}

protected void btnprev_Click(object sender, EventArgs e)

{

Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage - 1));

}

protected void btnnext_Click(object sender, EventArgs e)

{

Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage + 1));

}

protected void bsrc_Click(object sender, EventArgs e)

{

//Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage + 1));

}

protected void DataList4_SelectedIndexChanged(object sender, EventArgs e)

{

}

HTMLPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html >

<head>

<title>Full player example</title>

function init() { // Master function, encapsulates all functions

var video = document.getElementById("Video1");

if (video.canPlayType) { // tests that we have HTML5 video support

// if successful, display buttons and set up events

document.getElementById("buttonbar").style.display = "block";

document.getElementById("inputField").style.display = "block";

// helper functions

// play video

function vidplay(evt) {

if (video.src == "") { // inital source load

getVideo();

}

button = evt.target; // get the button id to swap the text based on the state

if (video.paused) { // play the file, and display pause symbol

video.play();

button.textContent = "||";

} else { // pause the file, and display play symbol

video.pause();

button.textContent = ">";

}

// load video file from input field

function getVideo() {

var fileURL = document.getElementById("videoFile").value; // get input field

if (fileURL != "") {

video.src = fileURL;

video.load(); // if HTML source element is used

document.getElementById("play").click(); // start play

} else {

errMessage("Enter a valid video URL"); // fail silently

}

// button helper functions

// skip forward, backward, or restart

function setTime(tValue) {

// if no video is loaded, this throws an exception

try {

if (tValue == 0) {

video.currentTime = tValue;

}

else {

video.currentTime += tValue;

}

} catch (err) {

// errMessage(err) // show exception

errMessage("Video content might not be loaded");

}

// display an error message

function errMessage(msg) {

// displays an error message for 5 seconds then clears it

document.getElementById("errorMsg").textContent = msg;

setTimeout("document.getElementById('errorMsg').textContent=''", 5000);

}

// change volume based on incoming value

function setVol(value) {

var vol = video.volume;

vol += value;

// test for range 0 - 1 to avoid exceptions

if (vol >= 0 && vol <= 1) {

// if valid value, use it

video.volume = vol;

} else {

// otherwise substitute a 0 or 1

video.volume = (vol < 0) ? 0 : 1;

}

// button events

// Play

document.getElementById("play").addEventListener("click", vidplay, false);

// Restart

document.getElementById("restart").addEventListener("click", function () {

setTime(0);

}, false);

// Skip backward 10 seconds

document.getElementById("rew").addEventListener("click", function () {

setTime(-10);

}, false);

// Skip forward 10 seconds

document.getElementById("fwd").addEventListener("click", function () {

setTime(10);

}, false);

// set src == latest video file URL

document.getElementById("loadVideo").addEventListener("click", getVideo, false);

// fail with message

video.addEventListener("error", function (err) {

errMessage(err);

}, true);

// volume buttons

document.getElementById("volDn").addEventListener("click", function () {

setVol(-.1); // down by 10%

}, false);

document.getElementById("volUp").addEventListener("click", function () {

setVol(.1); // up by 10%

}, false);

// playback speed buttons

document.getElementById("slower").addEventListener("click", function () {

video.playbackRate -= .25;

}, false);

document.getElementById("faster").addEventListener("click", function () {

video.playbackRate += .25;

}, false);

document.getElementById("normal").addEventListener("click", function () {

video.playbackRate = 1;

}, false);

document.getElementById("mute").addEventListener("click", function (evt) {

if (video.muted) {

video.muted = false;

evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"

} else {

video.muted = true;

evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"

}

}, false);

} // end of runtime

} // end of master

</script>

</head>

Your browser does not support HTML5 video.

HTML5 Video is required for this example

</video>

<br />

<label>Playback </label>

<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>

<label> Volume </label>

</div>

<br/>

<label>Type or paste a video URL: <br/>

</label>

</div>

</body>

</html>

Wednesday, 13 March 2013

how to play video file or YouTube video in ASP.Net Application

0 comments:

Post a Comment

Like my Page on facebook

Popular Posts

Author

Label