[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Calling Media Player in asp.net project from xxxx.VB file

Posted on 2011-05-13
9
Medium Priority
?
1,201 Views
Last Modified: 2012-06-27
Hi
I got the following code from 'yv989c' to play video on my web page and It works great.
The only problem is that I want to populate my listbox (ListBox1) from access database and play the movies from location in ListBox.SelectedValue. I get ListBox part OK but
I could not find how to call javascript function (loadMovie) from .VB.

Thank you in advance,
Dave
-------------------------

<%@ Page Language="VB" %>

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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        If Not IsPostBack Then
            ListBox1.Attributes.Add("onchange", "loadMovie(this)")
        End If
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Media Player</title>
    <script type="text/javascript">
        function loadMovie(src) {
            var wmp = document.getElementById('wmp');
            wmp.url = src.value;
            wmp.controls.play();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="float: left;">
            <fieldset>
                <legend>Movie List</legend>
                <asp:ListBox ID="ListBox1" runat="server" Rows="10" Width="200px">
                    <asp:ListItem Text="Movie A" Value="http://mediadl.microsoft.com/MediaDL/WWW/W/windowsserver2008/ServerUnleashed/platformpreference/godaddy.wmv"></asp:ListItem>
                    <asp:ListItem Text="Movie B" Value="http://ecn.channel9.msdn.com/o9/edge/5/3/4/2/1/key1_edge.wmv"></asp:ListItem>
                    <asp:ListItem Text="Movie C" Value="http://ecn.channel9.msdn.com/o9/te/NorthAmerica/2010/wmv-hq/ARC201.wmv"></asp:ListItem>
                </asp:ListBox>
            </fieldset>
        </div>
        <div style="float: right; text-align: center;">
            <object id="wmp" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                <param name="URL" value="" />
                <param name="SendPlayStateChangeEvents" value="True" />
                <param name="AutoStart" value="true" />
                <param name="uiMode" value="full" />
                <param name="PlayCount" value="9999" />
            </object>
        </div>
    </div>
    </form>
</body>
</html>
0
Comment
Question by:Yucel Altingoz
  • 6
  • 3
9 Comments
 
LVL 17

Expert Comment

by:Carlos Villegas
ID: 35761103
Hi my friend, me again, follow this example:
<%@ Page Language="VB" %>

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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        If Not IsPostBack Then
            ListBox1.Attributes.Add("onchange", "loadMovie(this)")
        End If
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Media Player</title>
    <script type="text/javascript">
        function loadMovie(src) {
            var wmp = document.getElementById('wmp');
            wmp.url = src.value;
            wmp.controls.play();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" SelectCommand="SELECT Title, Url FROM Movie"
        DataFile="~/App_Data/Demo.mdb"></asp:AccessDataSource>
    <div>
        <div style="float: left;">
            <fieldset>
                <legend>Movie List</legend>
                <asp:ListBox ID="ListBox1" runat="server" Rows="10" Width="200px" DataSourceID="AccessDataSource1" DataTextField="Title" DataValueField="Url">
                </asp:ListBox>
            </fieldset>
        </div>
        <div style="float: right; text-align: center;">
            <object id="wmp" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                <param name="URL" value="" />
                <param name="SendPlayStateChangeEvents" value="True" />
                <param name="AutoStart" value="true" />
                <param name="uiMode" value="full" />
                <param name="PlayCount" value="9999" />
            </object>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window


Download the aspx file and demo access DB from here:
MediaPlayer.aspx
Demo.mdb

Inside Demo.mdb is a table named Movie, with MovieId, Title and Url columns.

Be sure to put the Demo.mdb file into your web application App_Data folder to be able to run this demo without problems, of course you can put that file in another location but be sure to update the AccessDataSource DataFile property to the correct file path location.

Feel free to write if you have any questions.
0
 
LVL 17

Expert Comment

by:Carlos Villegas
ID: 35761181
Be aware of this, the previous demo is designed to work without page postbacks, just by selecting a movie from the list, if for any reason you need to do a postback, and you want to load the selected movie after that, you can invoke the loadMovie javascript method by following this example (look the ButtonPlayMovie_Click method):
<%@ Page Language="VB" %>

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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        'If Not IsPostBack Then
        '    ListBox1.Attributes.Add("onchange", "loadMovie(this)")
        'End If
    End Sub

    Protected Sub ButtonPlayMovie_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ClientScript.RegisterStartupScript(Me.GetType(), "LoadMovie", "loadMovie(document.getElementById('ListBox1'));", True)
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Media Player</title>
    <script type="text/javascript">
        function loadMovie(src) {
            var wmp = document.getElementById('wmp');
            wmp.url = src.value;
            wmp.controls.play();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" SelectCommand="SELECT Title, Url FROM Movie"
        DataFile="~/App_Data/Demo.mdb"></asp:AccessDataSource>
    <div>
        <div style="float: left;">
            <fieldset>
                <legend>Movie List</legend>
                <asp:ListBox ID="ListBox1" runat="server" ClientIDMode="Static" Rows="10" Width="200px"
                    DataSourceID="AccessDataSource1" DataTextField="Title" DataValueField="Url">
                </asp:ListBox>
            </fieldset>
            <br />
            <asp:Button ID="ButtonPlayMovie" runat="server" OnClick="ButtonPlayMovie_Click" Text="Play the Selected Movie on Post-Back" />
            <br />
            <asp:Button ID="ButtonPlayMovieNoPostBack" runat="server" Text="Play the Selected Movie Without Post-Back"
                OnClientClick="loadMovie(document.getElementById('ListBox1')); return false;" />
        </div>
        <div style="float: right; text-align: center;">
            <object id="wmp" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                <param name="URL" value="" />
                <param name="SendPlayStateChangeEvents" value="True" />
                <param name="AutoStart" value="true" />
                <param name="uiMode" value="full" />
                <param name="PlayCount" value="9999" />
            </object>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window


There is two buttons, the first one play the selected movie after a post-back (ButtonPlayMovie_Click method), the second button use a client side technique to play the selected movie without postback to the server.

I hope this help.
0
 

Author Comment

by:Yucel Altingoz
ID: 35770174
Hi yv989c
Thank you very much again for your help.

I have only one small quastion:
Is it possible to have a "FULL VIEW" controll so user can play video in full screen mode and by pressing "ESCAPE" it will go back to a original size?

Thanks,
Dave
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 17

Expert Comment

by:Carlos Villegas
ID: 35770904
Hi, yes it is possible, I added that function to this example:
<%@ Page Language="VB" %>

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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        'If Not IsPostBack Then
        '    ListBox1.Attributes.Add("onchange", "loadMovie(this)")
        'End If
    End Sub

    Protected Sub ButtonPlayMovie_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ClientScript.RegisterStartupScript(Me.GetType(), "LoadMovie", "loadMovie(document.getElementById('ListBox1'));", True)
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Media Player</title>
    <script type="text/javascript">
        function loadMovie(src) {
            var wmp = document.getElementById('wmp');
            wmp.url = src.value;
            wmp.controls.play();
            wmp.standby
        }
        function showFullScreen() {
            var wmp = document.getElementById('wmp');
            if (wmp.playState == 3)
                wmp.fullScreen = true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" SelectCommand="SELECT Title, Url FROM Movie"
        DataFile="~/App_Data/Demo.mdb"></asp:AccessDataSource>
    <div>
        <div style="float: left;">
            <fieldset>
                <legend>Movie List</legend>
                <asp:ListBox ID="ListBox1" runat="server" ClientIDMode="Static" Rows="10" Width="200px"
                    DataSourceID="AccessDataSource1" DataTextField="Title" DataValueField="Url">
                </asp:ListBox>
            </fieldset>
            <br />
            <asp:Button ID="ButtonPlayMovie" runat="server" OnClick="ButtonPlayMovie_Click" Text="Play the Selected Movie on Post-Back" />
            <br />
            <asp:Button ID="ButtonPlayMovieNoPostBack" runat="server" Text="Play the Selected Movie Without Post-Back"
                OnClientClick="loadMovie(document.getElementById('ListBox1')); return false;" />
            <br />
            <asp:Button Text="Full Screen" runat="server" OnClientClick="showFullScreen(); return false;" />
        </div>
        <div style="float: right; text-align: center;">
            <object id="wmp" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                <param name="URL" value="" />
                <param name="SendPlayStateChangeEvents" value="True" />
                <param name="AutoStart" value="true" />
                <param name="uiMode" value="full" />
                <param name="PlayCount" value="9999" />
            </object>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window


See the new showFullScreen javascript function and the button that call it.
0
 

Author Comment

by:Yucel Altingoz
ID: 35771885
Thank you very much again, it works great!

Just curiosity:
 “Full Screen” is an extra button and the mode is working only after movie is selected. When movie is played in “Full Screen” mode, the control does appear in the right bottom corner of the screen.
So the questions that came to my mind are:
Is it possible to have the control on the right bottom side of the player all the time, instead of a button?
Is it possible to change the mode, even if the player is idle?

Thanks again and sorry, if I have too many questions :-(
Dave
0
 
LVL 17

Accepted Solution

by:
Carlos Villegas earned 2000 total points
ID: 35772031
Dont worry Davie, all yours questions are fine for me, but be aware that we need to keep the post in a clean way, so you know that making different questions over your first question will make a distortions...

Now about your questions:
1. Is it possible to have the control on the right bottom side of the player all the time, instead of a button?
I dont think so buddy, the problem is, that screen region is handled by WMP, so we can't (at least with simple javascript, the other way is complex) change that behavior, but if you have WMP 12 installed it will show that button when you put your cursor near the windows bottom.

2. Is it possible to change the mode, even if the player is idle?
It appears that WMP dont allow that, just work when the movie is playing, but you can set it to always start on full screen mode, by adding the fullscreen attribute to your player container, follow this example:
<object id="wmp" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    type="application/x-oleobject">
    <param name="URL" value="" />
    <param name="SendPlayStateChangeEvents" value="True" />
    <param name="AutoStart" value="true" />
    <param name="uiMode" value="full" />
    <param name="PlayCount" value="9999" />
    <param name="fullscreen" value="true" />
</object>

Open in new window


Remember, you can use Esc key or double click to exit the full screen mode.
0
 
LVL 17

Expert Comment

by:Carlos Villegas
ID: 35772043
I meant Dave :p
0
 

Author Comment

by:Yucel Altingoz
ID: 35772253
Thank you again
You've been a great helper
Dave
0
 
LVL 17

Expert Comment

by:Carlos Villegas
ID: 35772278
You are welcome buddy
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question