Link to home
Start Free TrialLog in
Avatar of russomr
russomr

asked on

Adding video to a site

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.
Avatar of WelkinMaze
WelkinMaze

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?
Avatar of russomr

ASKER

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

Maybe just the file is too big and 10 seconds are not enough.
Avatar of russomr

ASKER

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.
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
Avatar of russomr

ASKER

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)?
what happens if you try to buffer 25 secs for example?
Avatar of russomr

ASKER

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.
Avatar of russomr

ASKER

Thanks for the above links, however neither site mentions anything about buffering for a video, unless I missed something.
And what happens if you remove this line:
<PARAM name="autoStart" value="True">

Or better change tha value to False
Avatar of russomr

ASKER

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.
Add

MediaPlayer1.controls.play();

instead of

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

in

function StartMeUp ()
{
MediaPlayer1.network.bufferingTime = 10000;
MediaPlayer1.URL = "Media/value.mpg";
}
ASKER CERTIFIED SOLUTION
Avatar of floorman67
floorman67

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
you may also wish to change the overall object dimensions as theya re set to 150x150
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 !
Avatar of russomr

ASKER

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?
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();
}
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>
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 !