Use JavaScript js to control Media Player Streaming Media

Source: Internet
Author: User

The method of embedding media player in a Web page is relatively simple, as long as you can use HTML, as shown below. <Br/> classid = "CLSID: 22d6f312-b0f6-11d0-94ab-0080c74c7e95" <br/> codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/ <br/> nsmp2inf. cab # version = 6,4, 5,715 "<br/> standby =" loading Microsoft? Windows Media? Player components... "<br/> type =" application/X-oleobject "> <br/> where ID is the object name, when you want to control the media player in Javascript, you can access the media player with the object name wmplay. Codebase indicates that the player control can be obtained from the specified location in the URL when the player control is not installed in the browser. <Br/> Of course, you can also specify parameters for a player object when creating it. <Br/> the "FILENAME" parameter indicates the live or stream of the file to be played by media player. "Showcontrols" indicates whether the control bar is displayed during playback. Media Player has many parameters. We will not detail them here. For more details, see the relevant sections in the Media Player SDK. <Br/> you can use JavaScript to control media player. </P> <p> in this example, the Media Player is embedded in the web page and There are buttons on the right of the Media Player. You can use these buttons to control the playback activity of the Media Player. The HTML code of these buttons is as follows: <br/> onclick = "controltype (false)"> <br/> onclick = "controltype (true) "> <br/> onclick =" displaysize (1) "> <br/> onclick =" displaysize (2) "> <br/> onclick =" displaysize (0) "> <br/> onclick =" playclick () "> <br/> onclick =" stopclick () "> </P> <p> from this example, we can see that when a user is a single button, The onclick function is called. In JavaScript Functions, you can directly use wmplay to control the player's activities, such as start playing, stop playing or stop playing, and zoom in or out. <Br/> In addition to controlling the embedded media player, you can also use events to control the embedded media player. Microsoft Windows Media Player supports many events, including common mouse events, such as mouse clicks, double-clicking, mouse movement, and mouse key press and release, there are also some media player-specific events. Events directly related to stream playback include: openstatechange, playstatechange, buffering, markerhit, and scriptcommand. Next we will give a brief introduction to these important events. <Br/> 1. openstatechange event <br/> openstatechange event indicates that the player status has changed. Media Player is Enabled: <br/> 0 indicates that the stream has been closed (nsclosed) <br/> 1 indicates that the ASX file (nsloadingasx) is being loaded) <br/> 2: loading the NSC file (nsloadingnsc) <br/> 3: Searching for Media Server (nslocating) <br/> 4 indicates that a connection is being established with the Media Server (nsconnecting) <br/> 5 indicates that the stream information is being opened or listened (nsopening) <br/> 6 indicates that the stream information has been opened (nsopen) </P> <p> mediaplayer is the name of the Media Player Object defined in. </P> <p> 2 playstatechange event <br/> playstatechange event indicates that the playback status of Media Player has changed, and media player may be in the following states: <br/> 0: mpstopped <br/> 1. mppaused <br/> 2. mpplaying) <br/> 3. Waiting for the stream to start (mpwaiting) <br/> 4. Forward search (mpscanforward) <br/> 5. Backward Search (mpscanreverse) <br/> 6. Forward (mpskipforward) <br/> 7. backward (mpskipreverse) <br/> 8. The stream has been disabled (mpclosed) <br/> the method for processing this event using JavaScript is: </P> <p> 3 buffering event <br/> buffering event indicates media play Er is buffering data to prepare for playing. Before playing a stream, media player must buffer a certain amount of data before playing the video. The buffering event reflects the buffer data of the player. The method for processing buffering events using JavaScript is as follows: <br/> bstart is a Boolean variable. If it is true, the buffer is in progress. Otherwise, the buffer has ended. </P> <p> 4 scriptcommand event <br/> the scriptcommand event indicates that media player receives the script command, in this case, the user can use the script command to analyze and decide to take corresponding processing. We know that the ASF Indexer tool of media tools can be used to add script commands to the stream. When the stream player receives these script commands, it will activate this event processing method, therefore, you can process the script command in the event processing method. The scriptcommand processing method is as follows: <br/> stype is the script command type, and the script command types include URL, text, and event, you can perform different processing based on the script command type. For example, if it is a URL Command, we can open the page specified in sparam within the specified frame. </P> <p> 5 markhit event <br/> the markerhit event is the same as the scritpcommand event. When the Media Player encounters a tag in the ASF stream, the event is activated, you can use this event to know which tags are currently marked. The markerhit event processing method is: <br/> Of course, in addition to event processing, as an ActiveX object, media player also has many attributes and methods) it can be used by web pages. For example, you can use the mediaplayer. markercount attribute to know the number of tags in the ASF stream, and use the mediaplayer. currentposition attribute to know the time of the current playback position. As for the method of the Media Player Object, we have used a lot of methods before, such as play () and pause. Because there are too many attributes and methods for Media Player objects, we cannot describe them here. Instead, we will introduce several important event processing methods. For more information, see the Media Player SDK help documentation. <Br/> This article briefly introduces the use of media player, a client application of Media Service, especially on Web pages. As a general media player, there are many other features not introduced here. The best way to understand a software function is to use it. If you are interested, you can download it from www.windowsmedia.com for free. </P> <p> playback: mediaplayer. play () <br/> pause: mediaplayer. pause () <br/> location: mediaplayer. setcurrententry (lwhichentry) <br/> mediaplayer. next () <br/> mediaplayer. previous () <br/> loop: mediaplayer. playcount = 0 <br/> 0: the clip plays repeatedly <br/> 1: Once <br/> stop: mediaplayer. stop () </P> <p> allowchangedisplaysize returns or sets whether the end user can set the display size (logical) <br/> allowscan returns or sets whether scanning is allowed (logical) <br/> animationatstart returns or sets whether to play an animation before the control starts playing. Draw sequence (logical type) <br/> audiostream returns or sets the audio stream number (used for multi-audio stream editing, default:-1) (Long Integer type) <br/> autorewind returns or sets whether to automatically repeat a media file after it is played (logical) <br/> autosize returns or sets whether to automatically adjust the control size to adapt to the loaded media (logical type) <br/> autostart returns or sets whether to automatically start playing after the media file is loaded (logical) <br/> balance returns or sets the playing channel of the specified stereo media file (-10000 is the left channel, 10000 is the right channel, 0 is the stereo) (long integer) <br/> return bandwidth or set the bandwidth of the current file (long integer) <br/> return the basic http url (string) through baseurl) <br/> bufferingcount: total buffer time for media file playback (long integer) <br/> Percentage of buffer completion returned by bufferingprogress (long integer) <Br/> bufferingtime returns the buffer time (Double Precision) <br/> canpreview returns or sets whether the currently displayed clip can be previewed (logical) <br/> canscan returns or sets whether the current file supports fast forward or backward (logical) <br/> canseek returns or sets whether the current file can be searched and located at a certain time (logical type) <br/> canseektomarkers returns or sets whether the file supports searching for tags (logical type) <br/> captioningid: return the name (string) of the frame or control displayed in the title. <br/> channeldescription: return the description (string) of the radio station) <br/> channelname: return the name of the station (string) <br/> channelurl: return the location of the station metadata file (string) <br/> clicktoplay returns or sets whether the client can pause or play a clip (logical) by clicking an image. <br/> clientid returns 1 identifier (string) <br/> codeccount returns the number of installable codecs files (long integer) <br/> contactaddress returns the contact address (string) of the radio station) <br/> contactemail returns the contact email address (string) of the radio station. <br/> contactphone returns the contact number (string) of the radio station) <br/> creationdate: return the creation date (date type) of the clip. <br/> currentmarker returns or sets the current bookmark number (Long Integer type) <br/> currentposition: returns or sets the current position of the clip (Double Precision) <br/> cursortype returns or sets the pointer type (long integer) <br/> defaultframe returns or sets the control's default target HTTP frame (string) <br/> displaybackcolor returns or sets the display panel background color (ole_color value) <br/> dis Playforecolor returns or sets the foreground color (ole_color value) of the display panel. <br/> displaymode returns or sets whether the display panel displays the current position in seconds or frames (mpdisplaymodeconstants value) <br/> displaysize: returns or sets the size of the image display window (mpdisplaysizeconstant value) <br/> Duration: returns or sets the playback time of the clip and clip (dual-precision) <br/> enablecontextmenu return or set whether context menu (logical) is allowed <br/> enabled return or set whether the control is available (logical) <br/> enablefullscreencontrols return or set whether full screen control is available (logical) <br/> enablepositioncontrols return or set whether location control is available (logical) <br/> enabletracker returns or sets the search bar Control availability (logical) <br/> errorcode returns the current error code (long integer) <br/> errorcorrection returns the error correction type (long integer) of the current clip) <br/> errordescription returns the description (string) of the current error <br/> filename returns or sets the name of the clip to be played (string) <br/> haserror: indicates whether the control has an error (logical type). <br/> hasmultipleitems returns or sets whether the control contains content of multiple projects (logical type) <br/> imagesourceheight: returns or sets the height of the original image (long integer) of the current clip. <br/> imagesourcewidth: returns or sets the width of the original image (long integer) of the current clip) <br/> invokeurls return or set whether the URL automatically sends the request (logical) <br/> isbroadcast return or set whether the source is broadcast (logical) <br/> Isdurationvalid returns or sets whether the duration value is valid (logical) <br/> language returns or sets the current region language (long integer) supported by the localization Language) <br/> lostpackets returns the number of lost data packets (long integer) <br/> markercount returns the number of file bookmarks (long integer) <br/> mute returns or sets whether the control is playing a sound (logical) <br/> openstate returns the control's content source status (long integer) <br/> playcount returns or sets the number of times a clip is played (long integer) <br/> playstate returns the current operation status of the control (long integer) <br/> previewmode return or set whether the control is in preview mode (logical) <br/> return rate or set playback frame rate (Double Precision) <br/> whether the control returned by readystate is ready (readystateconstant value) <br/> receivedpack ETS returns the number of received packets (long integer) <br/> predictionquality returns the percentage of packets received in the last 30 seconds (long integer) <br/> recoveredpackets returns the number of converted data packets (long integer) <br/> samifilename returns or sets the closed-captioning file name (string) <br/> samilang returns or sets the closed captioning language (string) <br/> samistyle returns or sets the closed captioning style (string) <br/> selectionend return or set the stream end position (double precision type) <br/> selectionstart return or set the stream start position (double precision type) <br/> senderrorevents returns or sets whether the control sends an error event (logical type) <br/> sendkeyboardevents returns or sets Whether the control sends a keyboard event (logical type) <br/> sendmouseclickevents returns or sets whether the control sends a mouse-Click Event (logical type) <br/> sendmousemoveevents: return or set whether the control sends a mouse movement event (logical type) <br/> sendopenstatechangeevents return or set whether the control sends an open state change event (logical type) <br/> sendplaystatechangeevents: return or set whether the control sends a playback status change event (logical type) <br/> sendwarningevents return or set whether the control sends a warning event (logical type) <br/> return showaudiocontrols or set whether to display audio control (logical) <br/> return showcaptioning or set whether to display Subtitles (logical) <br/> return showcontrols or set whether the control panel is visible (logical) <br/> showdispla Y return or set whether to display the display panel (logical) <br/> showgotobar return or set whether to display the jump bar (logical) <br/> return showpositioncontrols or set whether to display location control (logical) <br/> return showstatusbar or set whether to display the status bar (logical) <br/> showtracker returns or sets whether to display the search bar (logical type) <br/> sourcelink returns the path of the Content File (string) <br/> sourceprotocol returns the protocol used to receive data (long integer) <br/> streamcount returns the number of media frames (long integer) <br/> transparentatstart returns or sets whether the control is transparent (logical) before and after start playback) <br/> videoborder3d return or set whether the video border is displayed as 3D (logical) <br/> videobordercolor return or set video edge Box color (OLE _ color) <br/> videoborderwidth returns or sets the width of the video border (long integer) <br/> volume returns or sets the volume (long integer) </P> <p> mediaplayer attributes and methods <br/> attribute/method name: Description: <br/> [basic attributes] <br/> URL: string; specifies the media location, local or network address <br/> uimode: string; player interface mode, which can be full, Mini, none, invisible <br/> playstate: integer; playback status, 1 = stop, 2 = pause, 3 = play, 6 = buffer, 9 = connection, 10 = Ready <br/> enablecontextmenu: Boolean; enable/disable right-click menu <br/> fullscreen: Boolean; Whether to display in full screen <br/> [controls] WMP. controls // basic player control <Br/> controls. play; play <br/> controls. pause; pause <br/> controls. stop; stop <br/> controls. currentposition: Double; current progress <br/> controls. currentpositionstring: string; current progress, string format. For example, "" <br/> controls. fastforward; fast forward <br/> controls. fastreverse; return quickly <br/> controls. next; next song <br/> controls. previous; previous Qu <br/> [settings] WMP. settings // player basic Settings <br/> Settings. volume: integer; volume, 0-100 <br/> Settings. autostart: Boolean; Whether to play automatically <br/> Settings. mute: Boolean; Whether to mute <br/> Settings. playcount: integer; playback Times <br/> [currentmedia] WMP. currentmedia // current media attribute <br/> currentmedia. duration: Double; total media length <br/> Currentmedia. durationstring: string; total media length, in string format. For example, "" <br/> currentmedia. getiteminfo (const string); get current media information "title" = media title, "author" = artist, "Copyright" = copyright information, "Description" = media content description, "duration" = duration (seconds), "filesize" = file size, "filetype" = file type, "sourceurl" = original address <br/> currentmedia. setiteminfo (const string); set media information by attribute name <br/> currentmedia. name: string; same as currentmedia. getiteminfo ("title") <br/> [currentplaylist] WMP. currentplaylist // attributes of the current playlist <br/> currentplaylist. count: integer; number of media contained in the current playlist <br/> currentplaylist. item [integer]; obtains or sets the media information of the specified project. Its subattributes are the same as those of WMP. currentmedia

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.