Embedded page Streaming Media Player

From: http://www.cnblogs.com/riky/archive/2007/03/04/663269.html

 

1. Introduction to streaming media

The volume of multimedia information is large. audio/video and other information are transmitted over the network in two ways: Download and stream transmission. Streaming Transmission adopts the principle of receiving and playing, that is, the data stream is transmitted continuously and in real time by the Streaming Media Server to the user's computer, and the client does not have to wait

After the entire file is downloaded, it takes only a few or dozens of seconds to start the video. The client storage space is saved by playing the video, downloading, and discarding the file, effectively utilizes bandwidth and truly protects intellectual property rights of works.

Streaming media transmission requires two conditions: A Streaming Media Server that supports streaming and streaming media files. Currently, three streaming media companies are dominant in this field:

(1) Microsoft's windowsmedia

Http://www.microsoft.com/windows/windowsmedia/

(2) RealNetworks RealMedia

Http://www.real.com

(3) Apple QuickTime

Http://www.apple.com/quicktime/download/

Figure 1 shows the Stream Media Network playback process.

Figure 1 principles of streaming media transmission

2. Online publishing of streaming media files

Different from image text, the browser itself cannot play streaming media files and requires plug-ins or player installation. Commonly Used players such as Windows Media Player or Real Player can be downloaded for free at the corresponding site.

Streaming media file page publishing generally involves two methods: Page Link and page embedding. The embedded page is used. The player becomes a basic element of the page. The video or sound is embedded in the webpage. When the page is opened, it can be automatically played. The main benefits include: (1) designers can have full control over the appearance and functions of the player, so that they can freely design the size of the player. In the position on the page, you can use a button to play the specified unique file, which is seamlessly integrated with the page. (2) The Page scripting language JavaScript or VBScript is used to control the player. You can create a custom player appearance and implement special functions, such as implementing the page player function.

For both Windows Media and Real Media video files, there are two files: one is the video source file and the other is the pointer file pointing to the source file. The main reason for redirecting the stream information using the pointer file is: currently, Common Client browsers generally do not support MMS or RTSP protocols for stream information playback. requests must be sent to the Streaming Media Server, media Server streams the video source files specified in Pointer files. This article uses Windows Media as an example to describe its implementation method [1].

The simplest way to add a video to a page is to add a pointer file pointing to the web server in the HTML language on the page. First, use a text editor to generate the Yourfile. ASX pointer file, which is a plain text file.CodeAs follows:

<ASX version = "3.0">

<Title> Yourfile. ASX </title>

<Entry>

<Title> A simple ASX </title>

<Author> your name </author>

<Ref href = "MMS: // Windows Media Server/sample. ASF"/>

</Entry>

</ASX>

It can have multiple <entry> </entry>, indicating that multiple streams are to be played, that is, the playlist, each <entry> </entry> contains information about each stream, including title, author, and copyright. After the Yourfile. ASX file is generated, upload it to the Web server and the playback page must be in the same path.

Embedded pages use ActiveX Control Technology in IE, While Netscape Navigator uses plug-in technology. To directly play streaming media on the page, first create an ASX pointer file using the above method, or use the same ASX. For specific implementation, such as in Microsoft FrontPage, by inserting the ActiveX control Windows Media Player, the <Object> </Object> code is automatically generated in the HTML body item, as shown below. All you have to do is change the param item parameters as required, where the param item's filename parameter points to the streaming media file's pointer file Asx, namely http: // server/path/your-file.asx, set parameters as required.

<Object ID = "mediaplayer1" width = 180 Height = 200

Classid = "CLSID: 22d6f312-b0f6-11d0-94ab-0080c74c7e95"

Codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

Standby = "loading Microsoft Windows Media Player components ..."

Type = "application/X-oleobject" align = "center">

<Param name = "FILENAME" value = "server/path/your-file.asx">

<Param name = "showstatusbar" value = "true">

<Param name = "defaultframe" value = "mainframe">

<Embed type = "application/x-mplayer2"

Pluginspage = "http://www.microsoft.com/Windows/MediaPlayer"

Src = "http: // server/path/your-file.asx" align = "center"

Width = 176

Height = 144

Autostart = 1

Showcontrols = 0>

</Embed>

</Object>

Suitable playback window size:

Window Size	Transmission Rate
Width = 160 Height = 120	Suitable for 28.8 Kbps
Width = 240 Height = 160	Suitable for 56 kbps
Width = 320 Height = 240	It is suitable for scenarios with a bandwidth of higher than 100 kbps and a full screen bandwidth of kbps.

3. Specific implementation

As an ActiveX object, Media Player has many properties and methods available for Web pages. If it is used with JavaScript, it can implement more complex functions, the play (), pause (), and stop () Methods of Media Player are used to play, pause, and stop media players, media Player's displaysize, showcontrols, and filename attributes are used to control the playback window size, button visibility, and change the playback media file. Because there are too many attributes and methods for Media Player objects, we cannot describe them here. You can refer to the help documentation of Media Player SDK [2] for more information. This article uses JavaScript language and Media Player attributes and methods to implement a streaming media embedded page player function.

The complete code of the player is as follows:

<HTML>

<Title> embedded streaming media page player </title>

<Script language = "JavaScript">

<! -- First define the structure of the streaming media file and add the streaming media file to be played. -->

VaR streams = new array ();

Streams [0] = new makestream ("http: // server/path/your-file.asx", "Your movie name ");

Streams [1] = new makestream ("MMS: // Windows Media Server/sample. ASF", "sample movie ");

Function makestream (URL, name ){

This. url = URL;

This. Name = Name;

}

Function handlecontrolsonoffclick (){

If (document. mediaplayer. showcontrols = true ){

Document. mediaplayer. showcontrols = false;

Document. playerctrl. Controls. value = "display control ";

}

Else {document. mediaplayer. showcontrols = true;

Document. playerctrl. Controls. value = "Hide control"

}

}

Function handleplayorpauseclick (){

VaR state;

Playerstatus = Document. mediaplayer. playstate;

If (playerstatus = 6 ){

Document. mediaplayer. Play ();

Document. playerctrl. playorpause. value = "Suspend ";

}

Else if (playerstatus = 1 ){

Document. mediaplayer. Play ();

Document. playerctrl. playorpause. value = "Suspend ";

}

Else if (playerstatus = 2 ){

Document. mediaplayer. Pause ();

Document. playerctrl. playorpause. value = "play ";

}

}

Function changesize (newsize ){

Document. mediaplayer. displaysize = newsize;

}

<! -- When the user changes the streaming media file to be played, the STOP () method of Media Player is called to assign the URL address to the filename parameter of Media Player, and the Media Player starts playing again. -->

Function Change (){

VaR list = Document. playerctrl. streams;

VaR streamurl = List. Options [list. selectedindex]. value;

Document. mediaplayer. Stop ();

Document. playerctrl. playorpause. value = "Suspend ";

Document. mediaplayer. filename = streamurl;

}

</SCRIPT>

</Head>

<Body leftmargin = "100">

<H3> embedded streaming media page player

<Object

Id = "mediaplayer"

Classid = "CLSID: 22d6f312-b0f6-11d0-94ab-0080c74c7e95"

Codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

Standby = "loading Microsoft Windows Media Player components ..."

Type = "application/X-oleobject" width = "286" Height = "225">

<Param name = "FILENAME" value = "server/path/your-file.asx">

<Param name = "animationatstart" value = "true">

<Param name = "transparentatstart" value = "true">

<Param name = "autostart" value = "true">

<Param name = "showcontrols" value = "true">

</Object> <p>

<Form name = "playerctrl">

<Input type = "button" value = "pause" name = "playorpause" onclick = "handleplayorpauseclick ()" style = "font-family: Courier">

<Input type = "button" value = "hidden control" name = "controls" onclick = "handlecontrolsonoffclick ()" style = "font-family: Courier"> <br>

<Input type = "button" value = "small screen" name = "small" onclick = "changesize (1)" style = "font-family: courier "> <input type =" button "value =" original size "name =" normal "onclick =" changesize (0) "style =" font-family: courier "> <input type =" button "value =" "name =" large "onclick =" changesize (2) "style =" font-family: Courier ">

<P> select the target movie.

<Script language = "JavaScript">

<! -- After you select the streaming media file you want to play from the drop-down list, you can get the URL and name of the file. -->

With (document ){

Writeln ('<select name = "streams" onchange = "Change ()"> ');

For (VAR I = 0; I <streams. length; I ++ ){

Writeln ('<option value = "', streams [I]. url, '">', streams [I]. Name );

}

Writeln ('</SELECT> ');

}

</SCRIPT>

</P>

</Form> </body>

The streaming media files in the playlist include URLs (directed to the network address of the media file) and names (the file name displayed on the page). You can add media files of different addresses as required, you can point to two types of media files: Asx and ASF. They are written differently. The ASX index file is used to point to the corresponding index file address through HTTP, the ASF media file is used to directly play the directed media file using the MMS streaming media transfer protocol. Figure 2 shows an example of implementation.

Figure 2 Implementation of embedded streaming media player on the page

4. Conclusion

This article briefly introduces the use of media player on the web page by Media Service's customer application Program , in combination with the Javascript language, a page embedded logging program can be implemented to enable and play streaming media files. This example can be applied to music and video-on-demand websites to better protect the author's copyright.