The original link

Demand background

The React-Player control plays sound in Internet Explorer

The core idea

Embed embed embed embed embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed Embed The usage is as follows

function

Play: mediaplayer.play () Pause: mediaplayer.pause ()

  • MediaPlayer.SetCurrentEntry(lWhichEntry)
  • MediaPlayer.Next()
  • MediaPlayer.Previous()

Loop: mediaplayer. PlayCount = 0

  • 0: the clip plays repeatedly
  • 1: once

Stop: MediaPlayer. Stop ()

attribute

AllowChangeDisplaySize Returns or sets whether the end user can set the display size (logical) AllowScan Returns or sets whether scanning is allowed (logical) AnimationAtStart Returns or sets whether an animation sequence is played before the control starts playing (logical) AudioStream returns or sets the number of the AudioStream (for clips of multiple audio streams, Default: -1 (long integer) AutoRewind Returns or sets whether to wind the media file automatically after it finishes playing (logical) AutoSize Returns or sets whether to automatically resize the control to fit the loaded media (logical) AutoStart Balance Returns or sets the playback channel of the specified stereo media file (-10000 is the left channel, 10000 is the right channel, 0 for stereo)(long integer) Bandwidth Returns or sets the Bandwidth of the current file (long integer) BaseURL Returns the basic HTTP URL(string) BufferingCount Returns the total buffering time of the media file playback (long integer) BufferingProgress returns the percentage of buffering completion (long integer) BufferingTime returns the BufferingTime (double) CanPreview returns or sets whether the currently displayed clip can be previewed (logical) CanScan CanSeek Returns or sets whether the current file supports fast forward or rewind (logical) CanSeekToMarkers returns or sets whether the current file can be searched and located to a certain time (logical) CanSeekToMarkers returns or sets whether the file supports the search to the tag (logical) CaptioningID Returns the name of the frame or control displayed in the title (string) ChannelDescription Returns the description of the station (string) ChannelName Returns the name of the station (string) ChannelURL Returns the location of the metafile of the station (string) ClickToPlay ClientID returns the unique identifier of the client (string) CodecCount Returns the number of installable Codecs used by the file (long integer) ContactAddress ContactEmail returns the contact address of the station (string) ContactEmail returns the ContactEmail address of the station (string) ContactPhone returns the contact number of the station (string) CreationDate returns the CreationDate of the clip (date type) CurrentMarker CurrentPosition returns or sets the CurrentPosition of the clip (double) CursorType returns or sets the pointer type (long) DefaultFrame returns or sets the control’s default target Http frame (string) DisplayBackColor Returns or sets the background color of the display panel (OLE_COLOR value). DisplayForeColor Returns or sets the front color of the display panel (OLE_COLOR value) DisplayMode Returns or sets whether the display panel displays the current position in seconds or frames (MPDisplayModeConstants value) DisplaySize Returns or sets the image display window size (MPDisplaySizeConstant value) Duration EnableContextMenu Returns or sets whether the context menu is allowed (logical) Enabled Returns or sets whether the control is available (logical) EnableFullScreenControls Return or set whether full screen controls are available (logical) EnablePositionControls return or set whether position controls are available (logical) EnableTracker return or set whether search bar controls are available (logical) ErrorCode return the current ErrorCode (long integer) ErrorCorrection returns the type of ErrorCorrection for the current clip (long integer) ErrorDescription returns a description of the current error (string) FileName returns or sets the FileName (string) HasError for the clip to play HasMultipleItems Returns or sets whether the control contains the contents of some multiple items (logical) ImageSourceHeight Returns or sets the original image height of the current clip (long integer) ImageSourceWidth Returns or sets the original image width of the current clip (long integer) InvokeURLs returns or sets whether the URL automatically sends a request (logical) IsBroadcast returns or sets whether the source IsBroadcast (logical) IsDurationValid Returns or sets whether the duration value is valid (logical) Language returns or sets the current regional Language used for localized Language support (long integer) LostPackets returns the number of LostPackets (long integer) MarkerCount returns the number of file bookmarks (long integer) Mute OpenState Returns the content source state of the control (long integer) PlayCount Returns or sets the number of times a clip is played (long integer) PlayState Returns the current operating state of the control (long integer) PreviewMode ReadyState returns whether the control is ready (ReadyStateConstant value) ReceivedPackets returns the number of ReceivedPackets (long integer) ReceptionQuality RecoveredPackets RecoveredPackets SAMIFileName Returns or sets closed-captioning Language (string) SAMIStyle returns or sets closed Capetioning style (string) SelectionEnd SelectionStart Returns or sets the start position of the stream (double) SendErrorEvents Returns or sets whether the control sends an error event (logical) SendKeyboardEvents Return or set whether the control sends keyboard events (logical) SendMouseClickEvents Returns or sets whether the control sends mouse click events (logical) SendMouseMoveEvents Returns or sets whether the control sends mouse movement events (logical) SendOpenStateChangeEvents return or setting controls whether send open change events (logical) SendPlayStateChangeEvents returns or setting controls whether to send broadcast (logical) SendWarningEvents state change events ShowAudioControls Returns or sets whether the control sends warning events. ShowAudioControls returns or sets whether the control displays audio controls ShowDisplay Returns or sets whether the control panel is visible (Logical) ShowGotoBar Returns or sets whether the jump bar is displayed (Logical) ShowPositionControls Returns or sets whether the position control is displayed (Logical) ShowStatusBar Returns or sets whether to display the status bar (logical) ShowTracker Returns or sets whether to display the search bar (logical) SourceLink Returns the path to the content file (string) SourceProtocol Returns the protocol used to receive data (long integer) TransparentAtStart Returns or sets whether the control is transparent before and after playback (logical) VideoBorder3D Returns or sets whether the video border is displayed as 3D (logical) VideoBorderColor Returns or sets the color of the video border (OLE_ color) VideoBorderWidth Returns or sets the width of the video border (long integer) Volume Returns or sets the Volume (long integer)

The solution

The react-Player is compatible with Internet Explorer 9 to Internet Explorer 11

import React from 'react';
import PropTypes from 'prop-types';

function noop() {}

// Use the EMBED tag instead of audio tag to play WAV files. Compatible versions: IE9~11
export class IEReactPlayer extends React.PureComponent {
  static propTypes = {
    url: PropTypes.string, // Play path
    playing: PropTypes.bool, // Play status
    onProgress: PropTypes.func, // Progress update callback returns the percentage that has been played
    onDuration: PropTypes.func,  // Record length callback returns the total recording length in seconds
    onEnded: PropTypes.func, // Recording end callback, no return value
    volume: PropTypes.number, // Volume attribute. The value ranges from 0 to 1. This attribute does not take effect
    autostart: PropTypes.string, // Whether to play automatically. This property is compatible with the Audio component to request the URL after clicking the button, preventing the situation that the play button is clicked twice before starting to play
    progressInterval: PropTypes.number, // Progress refresh interval, default 100
  };

  static defaultProps = {
    url: ' '.playing: false.autostart: 'false'.progressInterval: 100};componentDidMount() {
    const { progressInterval } = this.props;
    this.timer = setInterval(() = > {
      // 0: stop, 1: pause, 2: play, 4: resource loading is complete
      const { onProgress = noop, onDuration = noop, onEnded = noop } = this.props;
      if (this.embed && this.embed.ReadyState === 4) {
        onDuration(this.embed.Duration);
        if (this.embed.PlayState ! = =2) {
          onEnded();
        }
        if (this.embed.PlayState === 2 || this.embed.PlayState === 0) {
          onProgress({
            played: this.embed.CurrentPosition / this.embed.Duration,
          });
        }
      }
    }, progressInterval);
  }

  componentWillUnmount() {
    this.timer && clearInterval(this.timer);
  }

  seekTo = (value) = > {
    // Set the playback position, in seconds
    this.embed.CurrentPosition = value * this.embed.Duration;
  }

  render() {
    const { url, playing, volume, autostart } = this.props;
    if (this.embed && this.embed.ReadyState === 4) {
      if (playing) {
        this.embed.play();
      } else {
        this.embed.pause();
      }
      this.embed.Volume = volume * 100;
    }
    return (<div>
      {
        url && <embed
          ref={(r)= > { this.embed = r; }}
          src={url}
          autostart={autostart}
          hidden
        />
      }
    </div>); }}export default IEReactPlayer;
Copy the code

Implementation effect