Monitoring Volume Changes on Wistia player.

I couldn’t find a way to bind the volume changes in React player or the stand alone wistia player. I’m not sure if this will work for other players so I just made a minor change a local copy of the Wistia player.

I modified the Wistia.js component

I used the local storage to volume change by default (versus via a prop) since I didn’t want to modify the code too much. Below shows the changes and below that, a full example of binding the ‘videochange’ event to react-player.

  load (url) {
    const _this = this
    const currentVolume = window.localStorage.getItem('currentVolume') || 1
   // 
        options: {
         //
          volume: currentVolume,
          //
        },
        onReady: player => {
         ///
          this.player.bind('volumechange', _this.onVolumeChange)
          onReady()
        }
      })
    })
  }
  onVolumeChange = (event) => {
      window.localStorage.setItem('currentVolume', event)
  }

Full Example

I’m putting this as a simple way to copy and paste to your local project.

import React, { Component } from 'react'

import { callPlayer, getSDK } from 'react-player/lib/utils'
import createSinglePlayer from 'react-player/lib/singlePlayer'

const SDK_URL = '//fast.wistia.com/assets/external/E-v1.js'
const SDK_GLOBAL = 'Wistia'
const MATCH_URL = /(?:wistia\.com|wi\.st)\/(?:medias|embed)\/(.*)$/

export class Wistia extends Component {
  static displayName = 'Wistia'
  static canPlay = url => MATCH_URL.test(url)
  static loopOnEnded = true

  callPlayer = callPlayer
  getID (url) {
    return url && url.match(MATCH_URL)[1]
  }
  load (url) {
    const _this = this
    const currentVolume = window.localStorage.getItem('currentVolume') || 1
    const { playing, muted, controls, onReady, onPlay, onPause, onSeek, onEnded, config } = this.props
    getSDK(SDK_URL, SDK_GLOBAL).then(() => {
      window._wq = window._wq || []
      window._wq.push({
        id: this.getID(url),
        options: {
          autoPlay: playing,
          silentAutoPlay: 'allow',
          muted: muted,
          controlsVisibleOnLoad: controls,
          volume: currentVolume,
          ...config.wistia.options
        },
        onReady: player => {
          this.player = player
          this.player.bind('play', onPlay)
          this.player.bind('pause', onPause)
          this.player.bind('seek', onSeek)
          this.player.bind('end', onEnded)
          this.player.bind('volumechange', _this.onVolumeChange)
          onReady()
        }
      })
    })
  }

  onVolumeChange = (volumeLevel) => {
      window.localStorage.setItem('currentVolume', volumeLevel)
  }
  play () {
    this.callPlayer('play')
  }
  pause () {
    this.callPlayer('pause')
  }
  stop () {
    this.callPlayer('remove')
  }
  seekTo (seconds) {
    this.callPlayer('time', seconds)
  }
  setVolume (fraction) {
    this.callPlayer('volume', fraction)
  }
  mute = () => {
    this.callPlayer('mute')
  }
  unmute = () => {
    this.callPlayer('unmute')
  }
  setPlaybackRate (rate) {
    this.callPlayer('playbackRate', rate)
  }
  getDuration () {
    return this.callPlayer('duration')
  }
  getCurrentTime () {
    return this.callPlayer('time')
  }
  getSecondsLoaded () {
    return null
  }
  render () {
    const id = this.getID(this.props.url)
    const className = `wistia_embed wistia_async_${id}`
    const style = {
      width: '100%',
      height: '100%'
    }
    return (
      <div key={id} className={className} style={style} />
    )
  }
}

export default createSinglePlayer(Wistia)

[thanhnx9368]

@cookpete It’s working. 🥳🥳🥳 Thank you for supporting!

[cookpete]

@thanhnx9368 Sorry, I thought we were talking about Wistia videos. If you are playing files we should discuss this in a new issue, but you can still check the muted status of the file player:

internalPlayer.addEventListener('volumechange', function () {
    console.log('muted', internalPlayer.muted);
}, false);
// video.onvolumechange = ... works too

Adapted from https://stackoverflow.com/a/25106820