@quicktvui/web-renderer 1.0.0

package/src/adapters/es3-video-player.js

@@ -0,0 +1,828 @@
+// IJKPlayerComponent - Web adapter using HTML5 Video API
+// Implements video player for web platform
+
+import { HippyWebView } from '@hippy/web-renderer'
+import { registerComponent } from '../core/componentRegistry'
+
+// Player states (matching native)
+const ESPlayerState = {
+  ES_PLAYER_STATE_IDLE: 0,
+  ES_PLAYER_STATE_PREPARING: 1,
+  ES_PLAYER_STATE_PREPARED: 2,
+  ES_PLAYER_STATE_BUFFER_START: 3,
+  ES_PLAYER_STATE_BUFFER_END: 4,
+  ES_PLAYER_STATE_PLAYING: 5,
+  ES_PLAYER_STATE_SEEK_START: 6,
+  ES_PLAYER_STATE_SEEK_COMPLETED: 7,
+  ES_PLAYER_STATE_PAUSED: 8,
+  ES_PLAYER_STATE_RESUMED: 9,
+  ES_PLAYER_STATE_BEFORE_STOP: 10,
+  ES_PLAYER_STATE_STOP: 11,
+  ES_PLAYER_STATE_PLAYBACK_COMPLETED: 12,
+  ES_PLAYER_STATE_ERROR: 13,
+  ES_PLAYER_STATE_VIDEO_SIZE_CHANGED: 14,
+  ES_PLAYER_STATE_PLAYER_VIEW_CHANGED: 15,
+  ES_PLAYER_STATE_AD_START: 16,
+  ES_PLAYER_STATE_AD_END: 17,
+  ES_PLAYER_STATE_AD_SKIP: 18,
+  ES_PLAYER_STATE_AD_PAUSED: 19,
+  ES_PLAYER_STATE_AUTHORIZED: 20,
+  ES_PLAYER_STATE_SET_PLAY_RATE_SUCCESS: 21,
+  ES_PLAYER_STATE_SET_PLAY_RATE_ERROR: 22,
+  ES_PLAYER_STATE_AD_RESUMED: 23,
+  ES_PLAYER_STATE_AD_LOADED: 24,
+  ES_PLAYER_STATE_AD_TIME: 25,
+  ES_PLAYER_STATE_PLAYER_INITIALIZED: 26,
+  ES_PLAYER_STATE_TIMED_TEXT_CHANGED: 27,
+  ES_PLAYER_STATE_PLAYER_CLICKABLE: 28,
+  ES_PLAYER_STATE_INITIALIZE_SUCCESS: 29,
+  ES_PLAYER_STATE_INITIALIZE_ERROR: 30,
+}
+
+export class IJKPlayerComponent extends HippyWebView {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'IJKPlayerComponent'
+    this.dom = document.createElement('video')
+
+    // Video element setup
+    this.dom.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      background: #000;
+    `
+    this.dom.playsInline = true
+
+    // State
+    this._playerState = ESPlayerState.ES_PLAYER_STATE_IDLE
+    this._url = ''
+    this._volume = 1
+    this._muted = false
+    this._loop = false
+    this._playbackRate = 1
+    this._aspectRatio = 0
+    this._positionListeners = []
+    this._destroyed = false
+
+    // Callbacks
+    this._progressCallback = null
+    this._durationCallback = null
+    this._bufferPercentCallback = null
+
+    // Additional state
+    this._isSeeking = false
+    this._isBuffering = false
+    this._playerType = 1
+    this._decode = 0
+
+    // Register component
+    registerComponent(id, this)
+    this._bindVideoEvents()
+  }
+
+  _bindVideoEvents() {
+    const video = this.dom
+
+    // Play event
+    video.addEventListener('play', () => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_PLAYING
+      this._dispatchPlayerStatusChanged()
+    })
+
+    // Pause event
+    video.addEventListener('pause', () => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_PAUSED
+      this._dispatchPlayerStatusChanged()
+    })
+
+    // Ended event (playback completed)
+    video.addEventListener('ended', () => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_COMPLETED
+      this._dispatchPlayerStatusChanged()
+      this._dispatchEvent('onPlayerCompleted')
+    })
+
+    // Error event
+    video.addEventListener('error', (e) => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_ERROR
+      this._dispatchEvent('onPlayerError', {
+        errorCode: e.target.error?.code || -1,
+        errorMessage: e.target.error?.message || 'Video error',
+      })
+      this._dispatchPlayerStatusChanged()
+    })
+
+    // Loaded metadata - video size info available
+    video.addEventListener('loadedmetadata', () => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_PREPARED
+      this._dispatchPlayerStatusChanged()
+      this._dispatchAspectRatioChanged()
+      this._dispatchEvent('onPlayerPrepared')
+      // Video size changed
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_VIDEO_SIZE_CHANGED,
+        playerState: ESPlayerState.ES_PLAYER_STATE_VIDEO_SIZE_CHANGED,
+        playerWidth: video.videoWidth || 0,
+        playerHeight: video.videoHeight || 0,
+      })
+    })
+
+    // Can play
+    video.addEventListener('canplay', () => {
+      if (this._playerState < ESPlayerState.ES_PLAYER_STATE_PREPARED) {
+        this._playerState = ESPlayerState.ES_PLAYER_STATE_PREPARED
+        this._dispatchPlayerStatusChanged()
+      }
+    })
+
+    // Time update for position
+    video.addEventListener('timeupdate', () => {
+      this._dispatchPositionChanged()
+    })
+
+    // Volume change
+    video.addEventListener('volumechange', () => {
+      const volume = video.volume
+      this._dispatchEvent('onPlayerVolumeChanged', {
+        leftVolume: volume,
+        rightVolume: volume,
+      })
+      this._dispatchEvent('onPlayerLeftVolumeChanged', volume)
+      this._dispatchEvent('onPlayerRightVolumeChanged', volume)
+    })
+
+    // Rate change
+    video.addEventListener('ratechange', () => {
+      this._dispatchEvent('onPlayerPlayRateChanged', {
+        playRate: video.playbackRate.toString(),
+      })
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_SET_PLAY_RATE_SUCCESS,
+        playerState: ESPlayerState.ES_PLAYER_STATE_SET_PLAY_RATE_SUCCESS,
+      })
+    })
+
+    // Waiting / Buffering start
+    video.addEventListener('waiting', () => {
+      this._dispatchEvent('onPlayerBufferStart')
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_BUFFER_START,
+        playerState: ESPlayerState.ES_PLAYER_STATE_BUFFER_START,
+      })
+    })
+
+    // Can play through / Buffering end
+    video.addEventListener('canplaythrough', () => {
+      this._dispatchEvent('onPlayerBufferEnd')
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_BUFFER_END,
+        playerState: ESPlayerState.ES_PLAYER_STATE_BUFFER_END,
+      })
+    })
+
+    // Playing (after buffering)
+    video.addEventListener('playing', () => {
+      this._dispatchEvent('onPlayerResumed')
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_RESUMED,
+        playerState: ESPlayerState.ES_PLAYER_STATE_RESUMED,
+      })
+    })
+
+    // Seeking start
+    video.addEventListener('seeking', () => {
+      this._dispatchEvent('onPlayerSeekStart')
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_SEEK_START,
+        playerState: ESPlayerState.ES_PLAYER_STATE_SEEK_START,
+      })
+    })
+
+    // Seeking completed
+    video.addEventListener('seeked', () => {
+      this._dispatchEvent('onPlayerSeekCompleted')
+      this._dispatchEvent('onPlayerStatusChanged', {
+        playerStatus: ESPlayerState.ES_PLAYER_STATE_SEEK_COMPLETED,
+        playerState: ESPlayerState.ES_PLAYER_STATE_SEEK_COMPLETED,
+      })
+    })
+
+    // Duration change
+    video.addEventListener('durationchange', () => {
+      const duration = Math.floor(video.duration * 1000)
+      // Duration is handled by _durationCallback (set via setDurationCallback)
+      // No need to dispatch event - the callback is the correct mechanism
+      if (this._durationCallback) {
+        try {
+          this._durationCallback(duration)
+        } catch (e) {
+          console.error('[IJKPlayerComponent] Duration callback error:', e)
+        }
+      }
+    })
+
+    // Progress (buffering progress)
+    video.addEventListener('progress', () => {
+      if (video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1)
+        const duration = video.duration
+        if (duration > 0) {
+          const bufferPercent = (bufferedEnd / duration) * 100
+          // Buffer percent is handled by _bufferPercentCallback (set via setBufferPercentCallback)
+          // No need to dispatch event - the callback is the correct mechanism
+          if (this._bufferPercentCallback) {
+            try {
+              this._bufferPercentCallback(bufferPercent)
+            } catch (e) {
+              console.error('[IJKPlayerComponent] Buffer percent callback error:', e)
+            }
+          }
+        }
+      }
+    })
+
+    // Load start
+    video.addEventListener('loadstart', () => {
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_PREPARING
+      this._dispatchEvent('onPlayerPreparing')
+      this._dispatchPlayerStatusChanged()
+    })
+  }
+
+  _dispatchPlayerStatusChanged() {
+    if (!this.dom) return
+    this._dispatchEvent('onPlayerStatusChanged', {
+      playerStatus: this._playerState,
+      playerState: this._playerState,
+      playerWidth: this.dom.videoWidth || 0,
+      playerHeight: this.dom.videoHeight || 0,
+    })
+  }
+
+  _dispatchPositionChanged() {
+    if (!this.dom) return
+    const position = Math.floor(this.dom.currentTime * 1000)
+    // Progress is handled by _progressCallback (set via setProgressCallback)
+    // No need to dispatch event - the callback is the correct mechanism
+    if (this._progressCallback) {
+      try {
+        this._progressCallback(position)
+      } catch (e) {
+        console.error('[IJKPlayerComponent] Progress callback error:', e)
+      }
+    }
+  }
+
+  _dispatchAspectRatioChanged() {
+    if (!this.dom) return
+    const width = this.dom.videoWidth
+    const height = this.dom.videoHeight
+    if (width && height) {
+      // Common aspect ratios
+      const aspectRatioList = [0, 1, 2, 3, 4] // Fit, 16:9, 4:3, 1:1, etc.
+      // Dispatch aspect ratio list changed event
+      this._dispatchEvent('onPlayerAspectRatioListChanged', aspectRatioList)
+      this._dispatchEvent('onAllAspectRatioChanged', {
+        aspectRatioList: aspectRatioList,
+      })
+      // Dispatch aspect ratio changed event
+      this._dispatchEvent('onPlayerAspectRatioChanged', {
+        aspectRatio: 0, // Default fit
+      })
+    }
+  }
+
+  _dispatchEvent(eventName, params) {
+    if (this._destroyed) return
+    if (!this.events) return
+    if (this.events[eventName]) {
+      this.dispatchEvent(eventName, params)
+      return
+    }
+    const target = eventName.toLowerCase()
+    const keys = Object.keys(this.events)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      if (key && key.toLowerCase() === target && this.events[key]) {
+        this.dispatchEvent(key, params)
+        return
+      }
+    }
+  }
+
+  // Handle attributes
+  updateProperty(key, value) {
+    switch (key) {
+      case 'src':
+        this._url = value
+        break
+      case 'muted':
+        this.dom.muted = value
+        break
+      case 'loop':
+        this.dom.loop = value
+        this._loop = value
+        break
+      case 'volume':
+        this.dom.volume = Math.max(0, Math.min(1, value))
+        break
+      case 'playbackRate':
+        this.dom.playbackRate = value
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // Initialize
+  init() {
+    this._playerState = ESPlayerState.ES_PLAYER_STATE_INITIALIZED
+    this._dispatchPlayerStatusChanged()
+  }
+
+  // Play video - params are spread by patches.js
+  play([
+    url,
+    aspectRatio,
+    leftVolume,
+    rightVolume,
+    playerOptionArray,
+    playerType,
+    playerMediaCodec,
+    options,
+    metadata,
+  ]) {
+    if (url) {
+      this._url = url
+      this.dom.src = url
+
+      // Set volume
+      const volume = leftVolume !== undefined ? parseFloat(leftVolume) : 1
+      this.dom.volume = Math.max(0, Math.min(1, volume))
+
+      // Set loop
+      if (options?.loop !== undefined) {
+        this.dom.loop = options.loop
+      }
+
+      // Set aspect ratio (object-fit)
+      this._setAspectRatio(aspectRatio || 0)
+
+      this._playerState = ESPlayerState.ES_PLAYER_STATE_PREPARING
+      this._dispatchPlayerStatusChanged()
+
+      this.dom.load()
+    }
+  }
+
+  // Start playback
+  start(progress) {
+    if (progress && progress > 0) {
+      this.dom.currentTime = progress / 1000
+    }
+    this.dom.play().catch((e) => {
+      console.error('[IJKPlayerComponent] Play error:', e)
+    })
+  }
+
+  // Pause
+  pause() {
+    this.dom.pause()
+  }
+
+  // Resume
+  resume() {
+    this.dom.play().catch(() => {})
+  }
+
+  // Seek to position (ms)
+  seekTo(progress) {
+    if (progress !== undefined) {
+      this.dom.currentTime = progress / 1000
+    }
+  }
+
+  // Stop
+  stop() {
+    this.dom.pause()
+    this.dom.currentTime = 0
+    this._playerState = ESPlayerState.ES_PLAYER_STATE_STOPPED
+    this._dispatchPlayerStatusChanged()
+  }
+
+  // Release
+  release() {
+    this._destroyed = true
+    this.dom.pause()
+    this.dom.src = ''
+    this._playerState = ESPlayerState.ES_PLAYER_STATE_RELEASED
+  }
+
+  // Get current position (ms)
+  getCurrentPosition() {
+    return Math.floor(this.dom.currentTime * 1000)
+  }
+
+  // Get duration (ms)
+  getDuration() {
+    return Math.floor(this.dom.duration * 1000) || 0
+  }
+
+  // Set volume
+  setVolume(volume) {
+    this.dom.volume = Math.max(0, Math.min(1, parseFloat(volume) || 1))
+  }
+
+  setLeftVolume(volume) {
+    this.dom.volume = Math.max(0, Math.min(1, parseFloat(volume) || 1))
+  }
+
+  setRightVolume(volume) {
+    // HTML5 video doesn't support stereo volume, same as left
+    this.dom.volume = Math.max(0, Math.min(1, parseFloat(volume) || 1))
+  }
+
+  setLeftRightVolume(leftVolume, rightVolume) {
+    // Average of left and right
+    const avgVolume = ((parseFloat(leftVolume) || 1) + (parseFloat(rightVolume) || 1)) / 2
+    this.dom.volume = Math.max(0, Math.min(1, avgVolume))
+  }
+
+  getLeftVolume() {
+    return this.dom.volume
+  }
+
+  getRightVolume() {
+    return this.dom.volume
+  }
+
+  // Set play rate
+  setPlayRate(rate) {
+    this.dom.playbackRate = parseFloat(rate) || 1
+  }
+
+  // Set aspect ratio
+  setAspectRatio(ratio) {
+    this._setAspectRatio(ratio)
+  }
+
+  _setAspectRatio(ratio) {
+    // 0: fit, 1: 16:9, 2: 4:3, 3: 1:1, 4: fill
+    const objectFitMap = {
+      0: 'contain', // fit
+      1: 'contain', // 16:9
+      2: 'contain', // 4:3
+      3: 'contain', // 1:1
+      4: 'cover', // fill
+    }
+    this.dom.style.objectFit = objectFitMap[ratio] || 'contain'
+    this._aspectRatio = ratio
+  }
+
+  // Set player size
+  setPlayerSize(width, height) {
+    if (width) this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+    if (height) this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+  }
+
+  setSize(width, height) {
+    this.setPlayerSize(width, height)
+  }
+
+  // Update layout
+  updateLayout(width, height, x, y) {
+    if (width) this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+    if (height) this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+    if (x !== undefined) this.dom.style.left = `${x}px`
+    if (y !== undefined) this.dom.style.top = `${y}px`
+  }
+
+  // Is stopped
+  isStopped() {
+    return this._playerState === ESPlayerState.ES_PLAYER_STATE_STOPPED
+  }
+
+  // Start position listener
+  startPositionListener() {
+    // Position updates are handled by timeupdate event
+  }
+
+  // Stop position listener
+  stopPositionListener() {
+    // Position updates are handled by timeupdate event
+  }
+
+  // Get track info
+  getTrackInfo(sysType) {
+    const tracks = this.dom.textTracks || []
+    const trackInfo = []
+    for (let i = 0; i < tracks.length; i++) {
+      trackInfo.push({
+        index: i,
+        type: tracks[i].kind,
+        label: tracks[i].label,
+        language: tracks[i].language,
+      })
+    }
+    return trackInfo
+  }
+
+  // Select track
+  selectTrack(index) {
+    const tracks = this.dom.textTracks
+    if (tracks && tracks[index]) {
+      tracks[index].mode = 'showing'
+    }
+  }
+
+  // Deselect track
+  deselectTrack(index) {
+    const tracks = this.dom.textTracks
+    if (tracks && tracks[index]) {
+      tracks[index].mode = 'disabled'
+    }
+  }
+
+  // Get media meta
+  getMediaMeta() {
+    return {
+      duration: this.dom.duration * 1000,
+      width: this.dom.videoWidth,
+      height: this.dom.videoHeight,
+    }
+  }
+
+  // Set definition (for HLS)
+  setDefinition(definition) {
+    // Not fully supported in HTML5, would need custom HLS.js
+  }
+
+  setM3U8Definition(index) {
+    // Not fully supported in HTML5
+  }
+
+  getM3U8DefinitionInfo() {
+    return []
+  }
+
+  // Placeholder methods for stats
+  getBitRate() {
+    return 0
+  }
+
+  getTcpSpeed() {
+    return 0
+  }
+
+  getVideoDecoder() {
+    return 'html5'
+  }
+
+  getCdnInfo() {
+    return {}
+  }
+
+  // Set options (no-op for web)
+  setUsingHardwareDecoder(value) {}
+  setPlayerType(type) {}
+  setOptionLong(category, name, value) {}
+  setOptionString(category, name, value) {}
+  setCacheInfo(cacheInfo) {}
+  setDecode(decode) {}
+
+  // Layout methods
+  requestLayout() {
+    // Force reflow
+    this.dom.offsetHeight
+  }
+
+  invalidate() {
+    this.requestLayout()
+  }
+
+  clickPlayerView() {}
+  changeToFullScreen(params) {}
+  requestPlayerViewLayout() {}
+  requestCustomSizeLayout(params) {}
+  requestCustomLayout() {}
+  setPlayerDimension(params) {}
+  setDefaultPlayerWidth(params) {}
+  setDefaultPlayerHeight(params) {}
+  setFullPlayerWidth(params) {}
+  setFullPlayerHeight(params) {}
+
+  // Component info
+  getEsInfo() {
+    return {
+      platform: 'web',
+      playerType: 'html5',
+    }
+  }
+
+  // Get component info - triggers onPlayerComponentInfo event
+  getComponentInfo() {
+    const info = {
+      isSupportDynamicallyLoadedSo: false,
+      isSupportAsyncInit: true,
+      platform: 'web',
+      playerType: 'html5',
+    }
+    this._dispatchEvent('onPlayerComponentInfo', info)
+    return info
+  }
+
+  // Init component - called after component info check
+  initComponent() {
+    // Dispatch player initialized event
+    this._dispatchEvent('onPlayerStatusChanged', {
+      playerStatus: ESPlayerState.ES_PLAYER_STATE_PLAYER_INITIALIZED,
+      playerState: ESPlayerState.ES_PLAYER_STATE_PLAYER_INITIALIZED,
+    })
+    // Dispatch initialize success event
+    this._dispatchEvent('onPlayerStatusChanged', {
+      playerStatus: ESPlayerState.ES_PLAYER_STATE_INITIALIZE_SUCCESS,
+      playerState: ESPlayerState.ES_PLAYER_STATE_INITIALIZE_SUCCESS,
+    })
+  }
+
+  // Set progress callback
+  setProgressCallback(callback) {
+    this._progressCallback = callback
+  }
+
+  // Set duration callback
+  setDurationCallback(callback) {
+    this._durationCallback = callback
+  }
+
+  // Set buffer percent callback
+  setBufferPercentCallback(callback) {
+    this._bufferPercentCallback = callback
+  }
+
+  // Get player state
+  getPlayerState() {
+    return this._playerState
+  }
+
+  // Get video width
+  getVideoWidth() {
+    return this.dom.videoWidth || 0
+  }
+
+  // Get video height
+  getVideoHeight() {
+    return this.dom.videoHeight || 0
+  }
+
+  // Check if playing
+  isPlaying() {
+    return !this.dom.paused && !this.dom.ended
+  }
+
+  // Get current play rate
+  getPlayRate() {
+    return this.dom.playbackRate || 1
+  }
+
+  // Get aspect ratio
+  getAspectRatio() {
+    return this._aspectRatio
+  }
+
+  // Get player type
+  getPlayerType() {
+    return this._playerType
+  }
+
+  // Set player type
+  setPlayerType(type) {
+    this._playerType = type
+  }
+
+  // Get decode mode
+  getDecode() {
+    return this._decode
+  }
+
+  // Set decode mode
+  setDecode(decode) {
+    this._decode = decode
+  }
+
+  // Mute
+  setMute(muted) {
+    this.dom.muted = muted
+    this._muted = muted
+  }
+
+  // Is muted
+  isMuted() {
+    return this.dom.muted
+  }
+
+  // Get video URL
+  getUrl() {
+    return this._url
+  }
+
+  // Set looping
+  setLooping(loop) {
+    this.dom.loop = loop
+    this._loop = loop
+  }
+
+  // Is looping
+  isLooping() {
+    return this.dom.loop
+  }
+
+  // Get available aspect ratios
+  getAspectRatioList() {
+    return [0, 1, 2, 3, 4] // Fit, 16:9, 4:3, 1:1, fill
+  }
+
+  // Get available play rates
+  getPlayRateList() {
+    return [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5]
+  }
+
+  // Get available decodes
+  getDecodeList() {
+    return [0, 1] // Hardware, Software
+  }
+
+  // Dispatch player info
+  dispatchPlayerInfo(info) {
+    this._dispatchEvent('onPlayerInfo', info)
+  }
+
+  // Additional compatibility methods
+  setCache(cacheInfo) {
+    // Not supported in HTML5, placeholder for API compatibility
+  }
+
+  // Get video cached duration
+  getVideoCachedDuration() {
+    if (this.dom.buffered.length > 0) {
+      return Math.floor(this.dom.buffered.end(0) * 1000)
+    }
+    return 0
+  }
+
+  // Get audio cached duration
+  getAudioCachedDuration() {
+    // HTML5 doesn't separate audio/video cache
+    return this.getVideoCachedDuration()
+  }
+
+  // Get video cached bytes
+  getVideoCachedBytes() {
+    // Not available in HTML5
+    return 0
+  }
+
+  // Get audio cached bytes
+  getAudioCachedBytes() {
+    // Not available in HTML5
+    return 0
+  }
+
+  // Get video cached packets
+  getVideoCachedPackets() {
+    // Not available in HTML5
+    return 0
+  }
+
+  // Get audio cached packets
+  getAudioCachedPackets() {
+    // Not available in HTML5
+    return 0
+  }
+
+  // Get TCP speed
+  getTcpSpeed2() {
+    return 0
+  }
+
+  // Get bit rate
+  getBitRate2() {
+    return 0
+  }
+
+  // Get drop frame rate
+  getDropFrameRate() {
+    return 0
+  }
+
+  // Get video decode frames per second
+  getVideoDecodeFramesPerSecond() {
+    return 0
+  }
+
+  // Get video output frames per second
+  getVideoOutputFramesPerSecond() {
+    return 0
+  }
+}