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
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">
<style type="text/css">
.i1
{
position:absolute;
left:185px;
}
.i2
{
position:absolute;
left:565px;
top:350px;
}
a.test
{
width:11em;
float:right;
}
</style>
<script type="text/javascript">
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">
<div style="position:absolute; left:165px; top:80px; width:450px;border:solid 1px gray; height:215px;">
<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">
<FooterStyle BackColor="White" ForeColor="#333333" />
<ItemStyle BackColor="White" ForeColor="#333333" />
<SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="205" width="440" title="video element">
<%
Response.TransmitFile("HTMLPage.htm"); %>
<source src='<%# Eval("Video_Name") %>' type="video/mp4">
<source src='<%# Eval("Video_Name") %>' type="video/ogg">
</video>
<br /> <a href="#">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>'></asp:Label></a>
</ItemTemplate>
</asp:DataList>
</div>
<div style="position:absolute;border:solid 1px gray; left:165px; top:330px; width:600px;">
<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"
>
<FooterStyle BackColor="White" ForeColor="#333333" />
<ItemStyle BackColor="White" ForeColor="#333333" />
<SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="180" title="video element">
<%
Response.TransmitFile("HTMLPage.htm"); %>
<source src='<%# Eval("Video_Name") %>' type="video/mp4">
<source src='<%# Eval("Video_Name") %>' type="video/ogg">
</video>
<br /> <a href="#" class="test">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="189"></asp:Label></a>
</ItemTemplate>
</asp:DataList>
</div>
<div style="position:absolute;border:solid 1px gray; left:165px; top:650px; width:600px;">
<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" >
<FooterStyle BackColor="White" ForeColor="#333333" />
<ItemStyle BackColor="White" ForeColor="#333333" />
<SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="180" title="video element">
<%
Response.TransmitFile("HTMLPage.htm"); %>
<source src='<%# Eval("Video_Name") %>' type="video/mp4">
<source src='<%# Eval("Video_Name") %>' type="video/ogg">
</video>
<br /> <a href="#" class="test">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="185"></asp:Label></a>
</ItemTemplate>
</asp:DataList>
</div>
<div style="position:absolute;border:solid 1px gray; left:165px; top:970px; width:600px;">
<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" >
<FooterStyle BackColor="White" ForeColor="#333333" />
<ItemStyle BackColor="White" ForeColor="#333333" />
<SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="180" title="video element">
<%
Response.TransmitFile("HTMLPage.htm"); %>
<source src='<%# Eval("Video_Name") %>' type="video/mp4">
<source src='<%# Eval("Video_Name") %>' type="video/ogg">
</video>
<br /> <a href="#" class="test">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Video_Name") %>' Width="185"></asp:Label></a>
</ItemTemplate>
</asp:DataList>
</div>
<div style="position:absolute; left:630px; top:80px; height:236px; width: 370px; right: 2px;">
<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"
>
<FooterStyle BackColor="White" ForeColor="#333333" />
<ItemStyle BackColor="White" ForeColor="#333333" />
<SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="50" width="150" title="video element">
<%
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>
<div style="position:absolute; left:775px; top:330px; width: 218px;">
<asp:DataList ID="DataList4" runat="server" RepeatColumns="1"
onselectedindexchanged="DataList4_SelectedIndexChanged" Width="221px"
>
<ItemTemplate>
<video id="Video1" controls style="border: 1px solid blue;" height="150" width="200" title="video element">
<%
Response.TransmitFile("HTMLPage.htm"); %>
<source src='<%# Eval("Video_Name") %>' type="video/mp4">
<source src='<%# Eval("Video_Name") %>' type="video/ogg">
</video>
<br /><a href="#" class="test">
<asp:Label ID="Label1" Width="189" runat="server" Text='<%# Eval("Video_Name") %>'></asp:Label></a>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>
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>
<!--
Uncomment the following meta tag if you have issues rendering this page on an
intranet or local site. -->
<!--
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/> -->
<script type="text/javascript">
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>
<body onload="init();" >
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">
Your browser does not support HTML5 video.
HTML5 Video is required for this
example
</video>
<div id="buttonbar" style="display: none;")>
<button id="restart" title="Restart button">[]</button>
<button id="slower" title="Slower playback button">-</button>
<button id="rew" title="Rewind button" ><<</button>
<button id="play" title="Play button">></button>
<button id="fwd" title="Forward button" >>></button>
<button id="faster" title="Faster playback button">+</button>
<button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
<br />
<label>Playback </label>
<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>
<label> Volume </label>
<button id="volDn" title="Volume down
button">-</button>
<button id="volUp" title="Volume up
button">+</button>
<button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
</div>
<br/>
<div id= "inputField" style="display:none;" >
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<div title="Error message
area" id="errorMsg" style="color:Red;"></div>
</body>
</html>
0 comments:
Post a Comment