Here I am new to Silverlight and I have to implement a video player in asp.net with C# , I found some article about video player and media player. I am implementing according the tutorials but the that is not working here I am sending my code please find out what is problem. Tell me what is the difference between media element and media player in Silverlight?
here is the code of .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<%# Register assembly="AjaxControlToolkit" amespace="AjaxControlToolkit" tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SILVERLIGHT MEDIA PLAYER | DEMO</title>
</head>
<body>
<form id="form1" runat="server">
<div id="xx" runat="server"></div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div style="float:left">
<asp:DropDownList ID="cmbSkins" runat="server"
onselectedindexchanged="cmbSkins_SelectedIndexChanged" />
</div>
<div><h3>SELECT PLAYER STYLE</h3></div>
</div>
<asp:MediaPlayer ID="MediaPlayer1" runat="server"
Width="600px"
Height="440px"
PlaceholderSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgMain.JPG">
</asp:MediaPlayer>
<hr />
<hr />
</form>
</body>
</html>
and this the code behind page:
public partial class _Default : System.Web.UI.Page
{
protected enum MediaPlayerSkins
{
AudioGray,
Basic,
Classic,
Console,
Expression,
Futuristic,
Professional,
Simple
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MediaPlayer1.AutoPlay = true;
MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
cmbSkins.Items.Add(MediaPlayerSkins.Classic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Console.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Expression.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Futuristic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Professional.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.AudioGray.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Simple.ToString());
cmbSkins.AutoPostBack = true;
cmbSkins.SelectedIndex = 4;
MediaPlayer1.MediaSource = Server.MapPath("~/") + "Wildlife.wmv";
xx.InnerHtml = Server.MapPath("~/") + "Wildlife.wmv";
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
I don't know anything about Silverlight and this is done using a article, I only changed the source of player nothing else and this is not working.
One question is arising in my mind that which is the best for playing video flash player or this one while we have a low bandwidth internet connection. Please tell me some useful solution?
Thanks
To answer this part of your question:
tell me what is the difference between media element and media player in silver light.
The MediaPlayer element you've used is an ASP.NET control which consists of a basic Silverlight player (using Silveright 1.0 I think). All you have to do is point it at the video file and it will play. The MediaPlayer gives you all the basic controls for playing media (play/pause, etc).
A MediaElement is a Silverlight type used in a Silverlight application, not an ASP.NET application like the MediaPlayer. MediaElements are used in XAML (i.e. Silverlight markup) to represent, well, media elements. The MediaElement doesn't give you controls for playing the media, it just renders it (whether audio or visual). You can use other elements in XAML to control the MediaElement, e.g. if you wanted a play/pause button, you could create another element to do that.
guys i found why it was not working i am missing the proper source path that should be "~/MediaFile.wmv" instead of server.mappath(....).
Related
I found alot of outdated options on the web so Just wandering what should be the best approach to convert DOM, as an PDF attachment and then send it via email.
I am using React as Front-end and .Net Core web Api as backend.
Thanks in Advance :)
Download jsPDF from Github Include these scripts below:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an
ID, which you can then ignore in a special element handler of jsPDF.
Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in
a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
One very important thing to add is that you lose all your style
information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3
etc., which was enough for my purposes. Additionally it will only
print text within text nodes, which means that it will not print the
values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
Attach the pdf and send emails with the help of this link
I have a WPF usercontrol that hosts an ASP.Net MVC Application using the webbrowser control.
I would like to notify the usercontrol when a certain action is performed on the WebApplication.
What are the possible ways to achieve this?
As #Szabolcs Dézsi mentioned in the comment if you have the access to Web Application you can use WebBrowser.ObjectForScripting to instance of an object and call its method from javascript. Here is a simple demo:
[ComVisible(true)] // Class must be ComVisible
public class Demo
{
public void SayHello(string name) => MessageBox.Show($"Hello {name} !!!");
}
Create an instance of this class an assign it to ObjectForScripting property of the WebBrowser control:
webBrowser.ObjectForScripting = new Demo();
and say this simple html page that we display in the WebBrowser control:
<html>
<head>
<title></title>
<script>
function sayhello()
{
var name = document.getElementById('name').value;
// the window.external is assigned an instance of
// class we created above.
// We can call C# instance method SayHello directly.
window.external.SayHello(name);
}
</script>
</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="" />
<input type="submit" name="submit" value="Say Hello" onclick="sayhello()" />
</form>
</body>
</html>
Now whenever you fill a name and click SayHello button it will display MessageBox as expected.
Also you have the property WebBrowser.Document which an instance of HtmlDocument that lives in Microsoft HTML Object Library (MSHTML) Com Library, make sure to reference it in your project.
The Document property allows you query the DOM object of the current page and through it you can manipulate your html page like in javascript via Method exposed by HtmlDocument Class like HtmlDocument.getElementById() and many others.
for example this code modify the value attribute of name input from above html page after page is loaded by WebBrowser control:
webBrowser.LoadCompleted += new LoadCompletedEventHandler((o, e) =>
{
if (webBrowser.Document is HTMLDocument DOM)
{
var namefield = DOM.getElementById("name");
namefield.setAttribute("value", "Enter your name!!!");
}
});
Hope this helps you to understand the power that WebBrowser control provides to manipulate loaded pages.
Basically I have an angular project that is based on bootstrap 3 for media queries resize.
What I intend to do is allow user to change between desktop mode (laptop full screen width) or mobile mode (media width < 667px).
I have see a lot of theme preview sites have this feature. As it is quite a common feature, I expect that it can be done this way but not sure how it could be implemented exactly.
Note: I am not expecting to change any part of existing CSS.
My opinion on how to implement this.
<html ng-viewport="deviceWidth">
<button ng-click="changeDeviceWidth()">
</html>
// initial
$scope.deviceWidth = getDeviceWidthFunction();
$scope.changeDeviceWidth = function (deviceWidth) {
$scope.deviceWidth = deviceWidth;
}
First: Give id to you viewport meta
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
Second: Create selector buttons
<div id="selecter">
<button onclick="toDesktop()"> Desktop</button>
<button onclick="toTablet()"> Tablet</button>
<button onclick="toMobile()"> Mobile</button>
</div>
Third: Add iframe as content viewer
<iframe id="mycontent" src="http://www.majali.net"></iframe>
Fourth: Add JS functions to set viewport,content width and height
<script>
function toDesktop() {
document.getElementById("viewport").setAttribute("content", "width=1200");
document.getElementById("mycontent").style.width='100%';
document.getElementById("mycontent").style.height='600px';
}
function toMobile() {
document.getElementById("viewport").setAttribute("content", "width=340");
document.getElementById("mycontent").style.width='320px';
document.getElementById("mycontent").style.height='480px';
}
function toTablet() {
document.getElementById("viewport").setAttribute("content", "width=767");
document.getElementById("mycontent").style.width='767px';
document.getElementById("mycontent").style.height='600px';
}
</script>
I'm trying to use dojo's dialog box in a page in my application but having some problems with the page in IE7 (or in IE 8 in some cases, when the page is viewed in compatibility mode).
Following is a rough skeleton structure of the page i'm trying to write.
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
var secondDlg;
dojo.addOnLoad(function() {
var foo = new dijit.Dialog({id:'testDialog', title: "test dialog", content: "test content" }, dojo.byId('dialog1Container'));
foo.startup();
var foo2 = new dijit.Dialog({id:'testDialog2', title: "test dialog 2", content: "test content 2" }, dojo.byId('dialog2Container'));
foo2.startup();
});
wrapper = function() {
dijit.byId('testDialog').show();
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<p>
When pressing this button the dialog will popup. Notice this time there
is no DOM node with content for the dialog:
</p>
<a onClick="wrapper();"> Show the test dialog</a>
<br />
<a onClick="dijit.byId('testDialog2').show();"> Show the test dialog</a>
<div id="dialog1Container"></div>
<div id="dialog2Container"></div>
</body>
In IE7, the page just hangs when it tries to display the dialog box from the 1st link.
Here are some symptoms of the malady ailing this page:
It breaks if there are more than 1 Dijit.dialog in the dom. If there is only 1, then it works fine
If there are more than 1 dialogs instances in the dom, only the last one works correctly. All previous ones end up freezing the browser.
The work around i'm using is to dynamically create an instance of dijit.Dialog in my js and insert it into the dom container and hitch a custom method to hide it. And when i'm hiding it i also call destroy on the dialog so it removes the dialog from the dom. This allows me to have multiple places in my page which can use the dialog, but only 1 will be displayed and be present in the dom at any point of time
And some extra info:
The html doc type i'm using is DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
It works fine in FF, Chrome and IE 8, only breaks in IE 7
I'm using dojo 1.5 (not the one from google's site, but a copy from my server, but i cant put that in the sample code)
Anybody have any idea about dojo's dialog having problems in IE 7?
Turns out this wasn't a problem with the dijit Dialogs itself, there was an event handler (not connected to dojo at all) which was causing the error, which is why it wasn't reproducible in a standalone page.
this should be simple...could someone provide me a simple code sample that has an aspx page hosting both a silverlight app (consisting of, say a button) and an iframe (pointing to, say stackoverflow.com). The silverlight app and iframe could be in separate div's, the same div, whatever.
Everything I've tried so far leaves me with a page that has no silverlight control rendered on it.
EDIT: At the request for what my xaml looks like (Plus I should point out that my controls render just fine if I comment out the iframe.)
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Pink">
<Button Content="Click Me!"/>
</Grid>
</UserControl>
Thats it. Just for good measure here is my aspx page...
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div style="height:100%;">
<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"/>
</form>
Hmm, sound a bit odd, a quick google gave me this top result which talks about using an Iframe and Silverlight on the same page, without problems.
Also a quick test with the following code:
<%# Page Language="C#" AutoEventWireup="true" %>
<%# 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" style="height:100%;">
<head runat="server">
<title>Test Page</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Test.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"></iframe>
</form>
</body>
</html>
Renders out both Silverlight and the Iframe quite happily.
What code were you using when trying and it didn't work?
What does your XAML look like?
It could be something along the lines of the size set on the usercontrol in XAML, doesn't match the size set on the plugin on the aspx page. In that case, your button might be there but just not in the viewable area... Try checking the size of things, make sure they match.
A quick test you could do is to change the background color of your root element in the XAML and see if anything happen on the page.
Also, does the silverlight work if you remove the Iframe but leave everything else as is?
Sorry if this a too simple suggestion but without knowing your experience level with XAML...
Funny enough, I just solved this issue by ensuring that I specify the iframe dimensions by pixel.