Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adding video to a site

Posted on 2006-05-02
22
Medium Priority
?
455 Views
Last Modified: 2010-04-06
I'm getting desperate here.  All I want to do is to place an MPEG video on a website.  The website is an ASP.Net 2.0 site with C#.  The goal is to have the video play automatically once the website loads, however I would like to be able to set a buffer of about 10 seconds before it does.  The video is large and will skip otherwise.  The closest thing I found to help is: http://www.mcse.ms/message1532898.html.  However, even after reading those, I can't even get his example to work.  I have the following code:

<html>
<body>

Sample Video Stream 1:<br>
<OBJECT ID="MediaPlayer1" width="182" height="160" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM name="autoStart" value="True">
<PARAM name="uiMode" value="none">
<PARAM name="AnimationAtStart" value="True">
<PARAM name="URL" value="Media/value.mpg">
</OBJECT>

<br><br>

<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">

<SCRIPT>
<!--
function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 10000;
MediaPlayer1.URL = "Media/value.mpg";
}

function ShutMeDown ()
{
MediaPlayer1.controls.stop();
}
-->
</SCRIPT>

</body>
</html>


I actually want it to auto-load and not have buttons, but I'm just trying to get control of the videos, so I'm starting with buttons.

Another place I'm looking is the windows media player object model reference: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/controlreference.asp.

I've posted a few times on this subject and I have yet to receive a reply.  This time, I at least have some code and a starting point.

To review:  The goal is to automatically play an MPEG video on a web page with WMP, however because of its size, it needs to buffer load.

Any help is greatly appreciated.  Thanks.
0
Comment
Question by:russomr
  • 7
  • 7
  • 4
  • +2
22 Comments
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16588489
Hi, what does not work with this code?
<html>
<body>

Sample Video Stream 1:<br>
<OBJECT ID="MediaPlayer1" width="182" height="160" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM name="autoStart" value="True">
<PARAM name="uiMode" value="none">
<PARAM name="AnimationAtStart" value="True">
<PARAM name="URL" value="Media/value.mpg">
</OBJECT>

<br><br>

<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">

<SCRIPT>
<!--
function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 10000;
MediaPlayer1.URL = "Media/value.mpg";
}

function ShutMeDown ()
{
MediaPlayer1.controls.stop();
}
-->
</SCRIPT>

</body>
</html>


It works fine on my computer. What happens when you try it?
0
 

Author Comment

by:russomr
ID: 16595223
I can get it to run with the above code, it just doesn't buffer.

Check it out:

http://www.backinbusiness.net/webs/cmc/PSO/_test.aspx

0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16595245
Maybe just the file is too big and 10 seconds are not enough.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:russomr
ID: 16595270
Once the start button is hit, it should begin to buffer and not start for at least 10 seconds.  But as you can see, once it is pressed, the video starts instantly.  No buffering.
0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16595343
I think you're starting the mpg file from your local computer or from a LAN location so in practice 10 seconds are buffered right away. Is it true?
You can see also this link:
http://www.mcse.ms/archive220-2005-4-1532898.html
0
 

Author Comment

by:russomr
ID: 16595424
Yes, I've seen that post.  In fact, I mentioned that link at the top of the thread.

The link http://www.backinbusiness.net/webs/cmc/PSO/_test.aspx is not on a local machine.  There's definitly room for buffering.  Notice how it stutters and doesn't play smoothly until you play it again (after it is downloaded)?
0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16595465
what happens if you try to buffer 25 secs for example?
0
 

Author Comment

by:russomr
ID: 16595484
Still nothing.  I've tried 3 minutes and it's like it just ignores the bufferingtime code.  I'm trying to find a working example of a video that does what I'm looking for, but cannot.  I know I've come across them but when I actually want to come across them, I can't find any.
0
 
LVL 20

Expert Comment

by:Gawai
ID: 16595757
0
 

Author Comment

by:russomr
ID: 16595867
Thanks for the above links, however neither site mentions anything about buffering for a video, unless I missed something.
0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16596162
And what happens if you remove this line:
<PARAM name="autoStart" value="True">

0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16596169
Or better change tha value to False
0
 

Author Comment

by:russomr
ID: 16602122
I changed it to false, and now when the button is clicked, nothing happens.  My object code is:

<OBJECT ID="MediaPlayer1" width="182" height="160" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM name="autoStart" value="False">
<PARAM name="uiMode" value="none">
<PARAM name="AnimationAtStart" value="True">
<PARAM name="URL" value="Media/value.mpg">
</OBJECT>

I can't believe this is such a difficult thing to do.  I would have thought that it would be easy.

Also, instead of using the javascript, couldn't I just add a parameter like: <PARAM name="bufferingTime" value="10000">?  It doesn't work either.

Help.
0
 
LVL 11

Expert Comment

by:WelkinMaze
ID: 16603368
Add

MediaPlayer1.controls.play();

instead of

MediaPlayer1.URL = "Media/value.mpg";

in

function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 10000;
MediaPlayer1.URL = "Media/value.mpg";
}
0
 
LVL 5

Accepted Solution

by:
floorman67 earned 2000 total points
ID: 16607133
Customize the PARAMs as needed but note the following two for autostart and buffering time.

also ensure your PATH to the file is correct ..test it with the absolute URL FIRST.

<object id="MediaPlayer" width=150 height=150 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" style="filter: xray;">
<param name="filename" value="_YOUR_FILE_HERE_" ref>
<param name="Showcontrols" value="1">
<param name="autoStart" value="-1">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="0">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="0">
<param name="EnablePositionControls" value="0">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowAudioControls" value="-1">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-2400">
<param name="WindowlessVideo" value="0">
</object>
0
 
LVL 5

Expert Comment

by:floorman67
ID: 16607138
you may also wish to change the overall object dimensions as theya re set to 150x150
0
 
LVL 5

Expert Comment

by:floorman67
ID: 16607580
also please note that buffering has to do with ALOT more than the file ... it also has to do with network congestion, internet weather, the path the data travels from server to the client.

In the cases of extremely large video files, buffering doesnt always stop skipping ...

all buffering does is for the client to take the file size and length and estimate X seconds of data cacheing of the file fragment of the stream.

it isnt a perfect science and users on questionable connections, low grade networks, cheap broadband, and dial up will still buffer/skip considerably on said large files.

Some people on slower conenction will ALWAYS buffer and skip regardless of the buffering time we place in the player for media content, and since we want to make our content as interactive and associative towards as many user as possible, we need to think of the slow guys too lest we lose them completely ... never to return again.

This is why i recommend two choices for every audio and video media placed for viewing .. one being high grade (for faster users) and the otehr low grade (for slower users), all to keep as many people comming back as possible.

what i would recommend is that you use this script IN CONJUNCTION WITH a compressed file for slower users and place links for low band and highband (slow and fast) connections (2 separate downloads)

this can be done easily with a javascipt functrion and a drop-down SELECT BOX.

First, make a compressed copy of the large file (with any decent video manipulation utility).

NOW, you have TWO VIDEO FILES ...  the original large file and a considerable smaller copy.

One is for hi speed users the other is for slower speed users.

Now, we want to create a selectable list of choices for the users for the two files, the easiest way of course would be a simple drop down select box with a unique NAME that we can create to work with the javascript we wil lcreate in a moment to dynamically update the players object URL when a user selects a stream source.

<select name="dropdown" onchange="songupdate()">
<option value="_PATH_TO_LOW-BAND_STREAM_FILE_">Low Band Video (56k/dial-up)</option>
<option value="_PATH_TO_HIGH-BAND_STREAM_FILE_">High Band Video (cable/dsl)</option>
</select>

Now we want to create a javascript function that will automatically insert the correct file path into the Media Player Object Player.

<script language="JavaScript">
<!--
function songupdate()
{
MediaPlayer.filename=dropdown.value;
}
</script>

NOTE THAT ALL THREEE WORK TOGETHER WITH THEIR UNIQUE ID AND NAME VARIABLES !

here is how they work.

the javascript creates a function to dynamically change players file being played when a user selects a item from the drop down list, while the drop down select box defines the streams, while the player decides the rest per PARAM configuration.

it is as simple as that.

ok lets put it all together in workable code.

PLEASE IGNORE THE PREVIOUS POSTED CODE IF YOU GO THIS ROUTE AND USE THE ONE PROVIDED RIGHT HERE BELOW.


<script language="JavaScript">
<!--
function songupdate()
{
MediaPlayer.filename=dropdown.value;
}
</script>

<object id="MediaPlayer" width=150 height=150 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" style="filter: xray;">
<param name="filename" value="_YOUR_FILE_HERE_" ref>
<param name="Showcontrols" value="1">
<param name="autoStart" value="-1">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="0">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="0">
<param name="EnablePositionControls" value="0">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowAudioControls" value="-1">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-2400">
<param name="WindowlessVideo" value="0">
</object>

<select name="dropdown" onchange="songupdate()">
<option value="">Please click here to select a video</option>
<option value="_PATH_TO_LOW-BAND_STREAM_FILE_">Low Band Video (56k/dial-up)</option>
<option value="_PATH_TO_HIGH-BAND_STREAM_FILE_">High Band Video (cable/dsl)</option>
</select>

you can change the params, player height and width, ass some css styles, or anything you want to dress it up.

good luck !
0
 

Author Comment

by:russomr
ID: 16611436
Great post.  Very informative.  Thank you.

However, I still can't even seem to buffer a little.  I was under the impression that if it buffers, it should at least pause once the page comes up for at least a couple seconds.  My video starts instantly.  My code is now:

<html>
<body>

Sample Video Stream 1:<br>
<object id="MediaPlayer" width=150 height=150 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" style="filter: xray;">
<param name="filename" value="Media/value.mpg" ref>
<param name="Showcontrols" value="1">
<param name="autoStart" value="-1">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="0">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10000">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="0">
<param name="EnablePositionControls" value="0">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowAudioControls" value="-1">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-2400">
<param name="WindowlessVideo" value="0">
</object>

</body>
</html>

The link to the page is:

http://www.backinbusiness.net/webs/cmc/PSO/_test2.aspx

I'm I wrong in saying it should at least pause a little to allow some buffering?
0
 
LVL 2

Expert Comment

by:koolkraft
ID: 16611995
Do you have your movie on a streaming server ? Because i don't believe that you can buffer your movie when it gets downloaded over http.

Try it with that url and see if it still doesn't buffer.
mms://www.tvid.be/tvid/95d6a6ae-a4cd-475a-b3c0-f0439e71d199.wmv

So your function StartMeUp() should look like :

function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 10000;
MediaPlayer1.URL = "mms://www.tvid.be/tvid/95d6a6ae-a4cd-475a-b3c0-f0439e71d199.wmv";
MediaPlayer1.controls.play();
}
0
 
LVL 2

Expert Comment

by:koolkraft
ID: 16612084
Try the function for start me up i just gave you with the html from the original question.  The object you have now is completely wrong it has got too many unnecessary parameters. The html from the original question and this function will work.

Try copy -pasting this in a html page. it will show you that it does buffer.

<html>
<body>

Sample Video Stream 1:<br>
<OBJECT ID="MediaPlayer1" width="182" height="160" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM name="autoStart" value="True">
<PARAM name="uiMode" value="none">
<PARAM name="AnimationAtStart" value="True">
<PARAM name="URL" value="Media/value.mpg">
</OBJECT><br /><br />
<span id="status" name="status" size="40"></span>
<br><br>

<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">

<script>
<!--
function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 5000;
MediaPlayer1.URL = "mms://www.tvid.be/tvid/95d6a6ae-a4cd-475a-b3c0-f0439e71d199.wmv";
MediaPlayer1.controls.play();
}

function ShutMeDown ()
{
MediaPlayer1.controls.stop();
}
document.getElementById("status").innerHTML="Waiting for user";
-->
</script>
<SCRIPT LANGUAGE="JScript"  FOR="MediaPlayer1" EVENT ="PlayStateChange(NewState)">

// Test for the current state.
// If playing, display the name of the current media.
var objStatus = document.getElementById("status");

switch (NewState){
    case 1:
    objStatus.innerHTML = "Playstate: Stopped";

    // Toggle the button states.
    BtnStop.disabled = true;
    BtnPlay.disabled = false;
    break;

    case 2:
    objStatus.innerHTML = "Playstate: Paused";
    break;

    case 3:
    objStatus.innerHTML = "Playstate: Playing";
   
    // Toggle the button states.
    BtnStop.disabled = false;
    BtnPlay.disabled = true;
    break;

    case 6:
    objStatus.innerHTML = "Playstate: Buffering";
    break;

    case 7:
    objStatus.innerHTML = "Playstate: Waiting";
    break;

    case 8:
    objStatus.innerHTML = "Playstate: Media Ended";
    break;

    case 9:
    objStatus.innerHTML = "Playstate: Loading components";
    break;

    case 10:
    objStatus.innerHTML = "Playstate: Ready";
    break;

    // Other cases go here.

    default:
    objStatus.innerHTML = "Playstate: Other";
}

</SCRIPT>



</body>
</html>
0
 
LVL 5

Expert Comment

by:floorman67
ID: 16612149
i tested it and mine buffered for the 10 seconds in teh buffertime .. the sript works perfectly

what is the speed capabilities of your host ???? I think the issue lies there for my skipping.

and i also skip through it  the whole way and I am on an 8 megabit commercial cable line.

as to you not buffering try the following.

1. check to ensure the file is not stuck in your internet cache .. if it is it will NOT stream, but instead it will play the cache'd copy, and of cource since the machine/player already has it, there will be no buffering at all becasue you already have it ....in this case delete internet temp files to test.

also if the server is your machine or network locally (localhost/127.0.0.1/192.x.x.x, then the speed is so fast the file was cace'd faster than the buffertime allows and wil lplay automatically almot immediately.

again i tested your page and my script works perfectly.

as to the last gentlemans script, it should work ok jsut thats some pretty heavy javascript and I only use that when required ..and it isnt a requirement here and i see no need to make your page that *heavy* with resource consuming javascript.

its a tight code though !
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

810 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