Embedded Web Video on Demand System Implementation Method

Embedded Web Video on Demand System Implementation Method

In recent years, the names of VOD (Video On Demand) have become increasingly popular in the media. VOD technology allows people to freely play on-demand video programs and information in their libraries on their computers or TVs without using video recorders, DVD players, and cable TVs based on their own interests, is an interactive system that allows you to freely choose the content of a video program.

The essence of VOD is that information users can actively obtain multimedia information based on their own needs, which is the biggest difference from information publishing: initiative and selectivity. In a sense, this is a way for information recipients to improve themselves and develop themselves according to their own needs. This method is becoming more and more in line with the deep needs of information resource consumers in today's information society, it can be said that VOD is the mainstream way to obtain information in the future in terms of multimedia video and audio. The concept of VOD will be quickly expanded in the field of information acquisition, with an infinite broad development prospects.

Background]
My organization has an internal website. In order to further improve the availability of the network and improve the functions of the website, I decided to provide the VOD function on the network. After a period of exploration and comparison, I finally chose RealPlayer from RealSystem as the video file playback tool, mainly based on the following considerations:

1. RealPlayer supports most of today's audio and video streaming formats, including popular MP3 and other audio media;

2. The default. rm format of RealPlayer ensures the playback quality and the File compression ratio is high, making it more conducive to network transmission;

3. RealPlayer has a wide range of user groups and service provider support on the Internet.

The options include Microsoft's mediaplayer and Apple's QuickTime. For more information, see "Search for a New Network ".Article: The three mainstream streaming media technology comparison (http://www.souxin.com/stream/txt/3_stream_comp/www.souxin.com.htm)

[Playback method selection]
Generally, after RealPlayer is installed, you can connect to a video file in two ways. One is to directly provide the URL of the video file on the web page. When a user clicks the link, RealPlayer automatically identifies and connects to play in real time; the second method is to embed a RealPlayer object in the web page using ActiveX controls, and dynamically specify the video stream URL for the embedded object through DHTML, thus providing a unified friendly interface for video playback.

The previous method is relatively simple for designers. You only need to provide the playback path of the video file. Skilled users of RealPlayer can also manage videos by customizing the playback mode of RealPlayer, downloading visual plug-ins, and adding them to favorites. However, this method also has the following defects:

1. For video files that contain Chinese paths and Chinese names, the browser does not support them very well. errors such as file not found often occur.

2. file association must be performed by the system. If a file association error occurs, the browser will be at a loss.

3. End users often want to see a unified playing interface instead of a pop-up playing interface.

Using embedded web video stream management, You can minimize the number of user-side operation requests (users only need to install the RealPlayer player ). With the help of a well-designed artist, you can also customize a beautiful and elegant playback interface as the designer wishes.

[Basic Concepts]
Before design, let's first understand some basic concepts.

1. <Object> and <embed> labels
<Object> is an object definition tag launched by Microsoft after ie4.0 to replace the <embed> label (ie still supports <embed>) and define the corresponding object type through the classid attribute. <Embed> A tag is an object definition tag supported by the Netscape Browser. If developers need to get support from both IE and Netscape Browser users, it is best to use the <embed> label.

2. Define the RAM File
Like rm files, ram files are also supported by RealPlayer for video file compression. The difference is that ram files can simply include the URL of video files. That is to say, the RAM file can be in a simple text format. Each line defines the URL of a video file.

During the test, I found that embedded RealPlayer generally downloads the entire video file to a local device and then plays the video file during video playback. This is unbearable for large video files. One way to solve this problem is to simply split the video file into small and moderate small files for segmented playback (because real implements "closed management" on the RM format ", so far, RM cannot be edited freely using video software like MPEG and other video files. The other is using RAM files. RealPlayer downloads a text-format RAM file, extracts the real address, and automatically connects to the network for real-time point-to-point playback. The disadvantage is that it increases the server load.

Similarly, Microsoft Media Player defines ASF files in ASX format.

3. DHTML
DHTML is short for Dynamic HTML. DHTML uses CSS (Cascading Style Sheet) in the traditional HTML language ), and rely on JavaScript to make static pages "dynamic. Netscape 4.0 and IE 4.0/5.0 support DHTML. DHTML is a completely "client" technology that enables interaction between pages and users through web pages. DHTML enhances the web page functions, and directly creates animations, games, and application software on Web pages. It provides a new way to browse websites, unlike Java, Flash, and other technologies, pages compiled using DHTML can be fully implemented without the support of plug-ins.

Design Process]
The following uses ie5.0 as an example to describe how to implement an embedded on-demand web video system. Some PHP and JavaScript technologies are used. If you have any questions, please refer to relevant materials.

1. Insert the RealPlayer ActiveX Object (if you want to perform a test, install the RealPlayer player first)
Assume the followingCodeThis file is included in the video. php document (the file will be linked through <IFRAME> on the home page ).

<Object width = "320" Height = "250" classid = "CLSID: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<Param name = "controls" value = "imagewindow">
<Param name = "console" value = "video">
<Param name = "center" value = "true">
<Param name = "maintainspect" value = "true">
</Object> // define the playback Interface
<Object width = "320" Height = "30" classid = "CLSID: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<Param name = "controls" value = "statusbar">
<Param name = "console" value = "video">
</Object> // define the status bar
<Object width = "320" Height = "30" classid = "CLSID: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<Param name = "controls" value = "controlpanel">
<Param name = "console" value = "video">
<Param name = "src" value = "<? PHP echo getsrc ();?> ">
<Param name = "autostart" value = "true">
<Param name = "prefetch" value = "0">
<Param name = "loop" value = "0">
<Param name = "numloop" value = "0">
</Object> // define the control panel

The controls parameter is used to specify the appearance of the player control. Multiple controls can be combined and associated using the console parameter.

For details about Param parameters, refer to the official RealPlayer website http://service.real.com/help/library/guides/production/htmfiles/control.htm.

The SRC parameter is particularly important to specify the URL address of the Video Stream file. Here, the author uses PHP code to dynamically specify SRC. Readers can also use other methods such as ASP or JavaScript.

2. Use DHTML to dynamically control the playback of RealPlayer controls
TIPS: <IFRAME>. Because you need to refresh the page by specifying a new src for the RealPlayer control, you can use <IFRAME> to embed the RealPlayer control into a separate page. In this way, Dynamic Refresh is performed within <IFRAME>, other content on the user's viewing page is not affected.

The following code is included on the home page:

<IFRAME id = "ivideo" src = "video. php" width = 500 Height = 345 frameborder = 0 scrolling = "no">
</Iframe>. The video. php file displays the RealPlayer control.

Next we will add a simple JavaScript code to control video playback.

<Script language = "JavaScript">
Function play (filename ){
Top.doc ument. All ("ivideo"). src = "video. php? Src = "+ filename;
} // Ivideo is the identifier of the IFRAME just defined
</SCRIPT>

We can use JavaScript to control more complex functions of the RealPlayer plug-in, such as extracting the video length and width, testing the user's network rate, and customizing playback events. For details about RealPlayer ActiveX development, see the official RealPlayer website http://service.real.com/help/library/guides/extend/embed.htm.

Suppose there is a video file whose URL is http: // yoururl/filename. Ram. Then we can define it as follows:

<A href = "javascript: Play ('HTTP: // yoururl/filename. ram ') "> file 1 </a>. If the file is local, the URL can also be a relative path.

3. Check whether the user has installed the RealPlayer player.
Add the following JavaScript code to the

<Script language = JavaScript>
<! --
VaR realmode = 0;
VaR realplayer5 = 0;
VaR realplayer4 = 0;
VaR realplayerg2 = 0;
If (navigator. useragent. indexof ("MSIE") <0 ){
Numplugins = navigator. plugins. length;
For (I = 0; I <numplugins; I ++ ){
Plugin = navigator. plugins [I];
If (plugin. Name. substring (0, 10) = "RealPlayer "){
Realmode = 1;
}
}
}
// The following code uses the Createobject () function of VBScript to dynamically create A RealPlayer object
Document. Write ('<script language = VBScript \> \ n ');
Document. Write ('on error resume next \ n ');
Document. Write ('realplayerg2 = (not isnull (Createobject ("rmocx. RealPlayer G2 control") \ n ');
Document. Write ('realplayer5 = (not isnull (Createobject ("RealPlayer. RealPlayer (TM) ActiveX Control (32-bit)") \ n ');
Document. Write ('realplayer4 = (not isnull (Createobject ("realvideo. realvideo (TM) ActiveX Control (32-bit)") \ n ');
Document. Write ('</script \> \ n ');
If (realplayerg2 | realplayer5 | realplayer4 ){
// You can add an <Object> object here.
} Else if (realmode) {// Netscape browser user
// You can add the <embed> object here.
} Else {
Window. Location. Replace ("install.htm"); // switch to install.htm to instruct you to install
}
-->
</SCRIPT>

So far, we have implemented a basic web-based VoD function. However, if we want to make the functions more perfect, we need other complicated considerations. Such as the creation of streaming media, the design of web site artists, the consideration of network flow rate, and the effective organization of website video files. These topics are beyond the scope of this article. Please refer to the relevant materials on your own.