Dynamic rich media component for ASP.Net Flash, Video, Audio, FlashVideo and ToolTip / Balloon Help controls for C# and VB.Net
Welcome Guest Search | Active Topics | Members | Log In | Register

Problems displaying and hiding a Flash video through javascript Options · View
adrianBC
Posted: Tuesday, July 06, 2010 4:59:54 PM
Rank: Member
Groups: Member

Joined: 7/6/2010
Posts: 11
Points: 33
Location: Vancouver
Hello,

I got the netflashvideo control inside an update panel with the autoplay=true.

I am trying to show/hide it through javascript.

<input type="button" value="PlayMedia" onclick='ASPNetMedia.FlashVideo("FlashVideo1").PlayMedia ()'/>
<input type="button" value="StopMedia" onclick='ASPNetMedia.FlashVideo("FlashVideo1").StopMedia ()'/>
<script type="text/javascript">
ASPNetMedia.FlashVideo("FlashVideo1").OnStop = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.display = 'none';
}

ASPNetMedia.FlashVideo("FlashVideo1").OnPlay = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.display = '';
}
</script>

This code works well to stop and hide the video, but it doesn't let me show it again.

Thanks in advance for your help.... !

Jake
Posted: Wednesday, July 07, 2010 12:38:44 AM
Rank: Administration
Groups: Administration

Joined: 7/26/2007
Posts: 676
Points: 1,728
Location: USA
Hi Adrian

Your JavaScript has a bug:

ASPNetMedia.FlashVideo("FlashVideo1").OnPlay = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.display = 'block';
}

http://www.aspnetmedia.com
adrianBC
Posted: Wednesday, July 07, 2010 3:01:25 AM
Rank: Member
Groups: Member

Joined: 7/6/2010
Posts: 11
Points: 33
Location: Vancouver
Tried it before posting my original comment!
Tried all options from display='block', display='inline' to display='' but none of them work.

The OnStop event work great to hide the video (display='none';) but then the OnPlay would not let me play it again.

I wonder if it's related to the CSS you've suggested me to use before:
.myalwasvsibleclassleft
{
position:fixed;
z-index:10000;
left:0px;
bottom:0px;
}

One more time, thanks for providing some guidance!!!!
adrianBC
Posted: Thursday, July 08, 2010 8:03:38 PM
Rank: Member
Groups: Member

Joined: 7/6/2010
Posts: 11
Points: 33
Location: Vancouver
Hi Jake,
I spent over 2 days already into this but can't get it to work.
Have you had any chance to try the code yourself?
Thanks.
adrianBC
Posted: Thursday, July 08, 2010 8:07:47 PM
Rank: Member
Groups: Member

Joined: 7/6/2010
Posts: 11
Points: 33
Location: Vancouver
Here is the entire ASPX file:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register Assembly="ASPNetMediaGUI.NET3" Namespace="ASPNetMediaGUI" TagPrefix="ASPNetMediaGUI" %>

<%@ Register Assembly="ASPNetFlashVideo.NET3" Namespace="ASPNetFlashVideo" TagPrefix="ASPNetFlashVideo" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" 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></title>
<style type="text/css">

.myalwasvsibleclass
{
position:fixed;
z-index:10000;
right:0px;
bottom:0px;
}

</style>
</head>

<body>
<form id="form1" runat="server">


<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<div align="left">
adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />
adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />
adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />
adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />adfdsdsadsfds<br />

</div>


<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<ASPNetFlashVideo:FlashVideo cssclass="myalwasvsibleclass" ID="FlashVideo1" runat="server" AutoPlay="true" VideoURL="Images/whatisabusinessplan.flv" Height="360" ScaleMode="StretchToFit" ShowControlPanel="False" Width="640" WindowMode="Transparent" AllowFullScreen="False" BorderWidth="4" BorderColor="Maroon" Enabled="true" Alignment="Left"></ASPNetFlashVideo:FlashVideo>
<asp:AlwaysVisibleControlExtender ID="FlashVideo1_AlwaysVisibleControlExtender"
runat="server" Enabled="True" TargetControlID="FlashVideo1"
HorizontalSide="Left" VerticalSide="Bottom" >
</asp:AlwaysVisibleControlExtender>
<input type="button" value="PlayMedia" onclick='ASPNetMedia.FlashVideo("FlashVideo1").PlayMedia ()'/>
<input type="button" value="StopMedia" onclick='ASPNetMedia.FlashVideo("FlashVideo1").StopMedia ()'/>
<script type="text/javascript">
ASPNetMedia.FlashVideo("FlashVideo1").OnStop = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.display = 'none';
}

ASPNetMedia.FlashVideo("FlashVideo1").OnPlay = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.display = 'block';
}
</script>

</ContentTemplate>
</asp:UpdatePanel>



</form>
</body>
</html>
Jake
Posted: Friday, July 09, 2010 10:24:12 AM
Rank: Administration
Groups: Administration

Joined: 7/26/2007
Posts: 676
Points: 1,728
Location: USA
Happy to.

To avoid my compiling your code - please just give me a URL.
From that i can see the WHOLE picture - and analyze what to do.




http://www.aspnetmedia.com
adrianBC
Posted: Saturday, July 17, 2010 6:51:38 AM
Rank: Member
Groups: Member

Joined: 7/6/2010
Posts: 11
Points: 33
Location: Vancouver
Try http://www.interactivebusinessplanner.com/default2.aspx

When I use your control's javascript API to play/stop the video, other stuff gets messed up depending the browser I use. In Firefox and IE: The action of the continue button would not be rendered at all. In Chrome: The ajax htmleditor would not be rendered properly.

Below, the final version of the aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>

<%@ Register Assembly="ASPNetMediaGUI.NET3" Namespace="ASPNetMediaGUI" TagPrefix="ASPNetMediaGUI" %>

<%@ Register Assembly="ASPNetFlashVideo.NET3" Namespace="ASPNetFlashVideo" TagPrefix="ASPNetFlashVideo" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" 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></title>
<style type="text/css">

.myalwasvsibleclass
{
position:fixed;
z-index:10000;
right:0px;
bottom:0px;
}

</style>
</head>

<body>
<form id="form1" runat="server">


<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<div align="right">
Please enter text here<br />
<cc1:Editor ID="Editor1" runat="server" />
<asp:Button ID="Button3" runat="server" Text="Continue" Width="120" />
</div>


<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<ASPNetFlashVideo:FlashVideo cssclass="myalwasvsibleclass" ID="FlashVideo1" runat="server" AutoPlay="true" VideoURL="Images/whatisabusinessplan.flv" Height="360" ScaleMode="StretchToFit" ShowControlPanel="False" Width="640" WindowMode="Transparent" AllowFullScreen="False" BorderWidth="4" BorderColor="Maroon" Enabled="true" Alignment="Left"></ASPNetFlashVideo:FlashVideo>
<asp:AlwaysVisibleControlExtender ID="FlashVideo1_AlwaysVisibleControlExtender"
runat="server" Enabled="True" TargetControlID="FlashVideo1"
HorizontalSide="Left" VerticalSide="Bottom" >
</asp:AlwaysVisibleControlExtender>


<asp:Button ID="playb" runat="server" CssClass="myalwasvsibleclass" PostBackUrl="javascript:void()" Text="Play Video" />

<asp:Button ID="stopb" runat="server" CssClass="myalwasvsibleclass" PostBackUrl="javascript:void()" Text="Stop Video" />

<script type="text/javascript">
ASPNetMedia.FlashVideo("FlashVideo1").OnStop = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%= stopb.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%= playb.ClientID %>').style.visibility = 'visible';
}

ASPNetMedia.FlashVideo("FlashVideo1").OnFinish = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%= stopb.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%= playb.ClientID %>').style.visibility = 'visible';
}
ASPNetMedia.FlashVideo("FlashVideo1").OnPlay = function(object, position) {
document.getElementById('<%= FlashVideo1.ClientID %>').style.visibility = 'visible';
document.getElementById('<%= playb.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%= stopb.ClientID %>').style.visibility = 'visible';
}

function playVideo() {
ASPNetMedia.FlashVideo("FlashVideo1").PlayMedia("Images/congratulations.flv");
}

function stopVideo() {
ASPNetMedia.FlashVideo("FlashVideo1").StopMedia;
}
</script>

</ContentTemplate>
</asp:UpdatePanel>



</form>
</body>
</html>



And here is the code of the default2.aspx.vb


Partial Class Default2
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.playb.Attributes.Add("onClick", "ASPNetMedia.FlashVideo('FlashVideo1').PlayMedia ()")
Me.stopb.Attributes.Add("onClick", "ASPNetMedia.FlashVideo('FlashVideo1').StopMedia ()")

End Sub

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
Response.Redirect("http://www.google.ca")
End Sub
End Class

Jake
Posted: Tuesday, July 20, 2010 6:17:09 AM
Rank: Administration
Groups: Administration

Joined: 7/26/2007
Posts: 676
Points: 1,728
Location: USA
Hi

FF - the continue button works fine for me. Its a form submit button.

My Thaughts

If its now working - consider that the flash overlaying the button will trap all mouse clicks and get in the way.

Likewize for chrome. Try restricting the size of your overlay so it doesn't over your buttons / editor where possible.



http://www.aspnetmedia.com
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.