Provide non-React JS API

[tepaze]

Hi,

Do you think about building a vanilla JS MPV component ?

It would be cool :-)

[Kagami]

Yea, it would be nice, not everyone using React.

[tepaze]

Like me :-)

I'm trying to build an electron video player with non h264 capabilities, to build a video app around video, and it's not easy to find another component than WebChimera.js... The problem is WCJS is not sure for the futur, and had no hw decoding capability...

Perhaps it's electron that is not the right choice...

Hope you take time to build that Vanilla JS MPV component :-)

[burketeralogics]

Yeah I second this one. I was able to read through the react component code and cobble something together to create an angular component. A vanilla example would have been very helpful though.

If I get a breather I'll look over my code for the component and see if I can break it down into something vanilla, it's a simple one, so a lot easier to use.

I'm using this for an Electron app (angular as the framework) and it works great so far. I needed multicast video playback as a requirement.

I spent time in WCJS hell, mpv.js is serious a blessing. It took me a day or so to get up and running, including compiling on an ancient distro. Easier to maintain, seems quicker, a bit more flexible, and works.

[CanRau]

would love this too :D

and as a side note, I tried to vueify it but couldn't get require.resolve to work so far because I'm using webpack and it's returning the module id instead of like node returning the actual path
any ideas about this one?

[TRPB]

If anyone's interested, I spent about half an hour getting some basic functionality working without react. This may be a helpful starting point for anyone interested:

  var embed = document.createElement('embed');
  embed.type = 'application/x-mpvjs';

  document.body.insertBefore(embed, document.body.firstChild);


  embed.addEventListener('message', function(recv) {

    if (recv.data.type == 'ready') {
        var type = 'command';
       var data = ['loadfile', '/home/tom/tmp/mpv.js/example/tos.mkv'];
       const send = {type, data};
       embed.postMessage(send);
    }
  });

Take a look at index.js for the other commands, but this should be helpful for anyone else wanting a simple example.

[guest271314]

@TRPB Can the code be used at Chromium browser?

[TRPB]

If the extension will load, probably but it's rather pointless unless your site is an intranet site and you have control of all the installations.

[guest271314]

@TRPB What mean is using mpv.js without an "extension". As Chromium uses a video decoder (for VP8 and VP9 and potentially in the future for any codec) that does not resize HTML <video> element when underlying frame resolution changes, only displays the pixel dimensions of the initial pixel dimensions in the container metadata. Am trying to determine if this code can be adjusted to substitute for HTML <video> element altogether on the main thread in HTML document.

[Kylart]

If this helps, I made a Vue component fully compatible:

<script>
export default {
  name: 'MpvWrapper',

  data: () => ({
    style: {
      display: 'block',
      width: '100%',
      height: '100%',
      'pointer-events': 'none' // Allows cursor to be handled directly by MPV?
    },
    plugin: null,
    mimeType: 'application/x-mpvjs',

    mouseClick: {
      left: 0,
      timeout: null
    }
  }),

  props: {
    onPropertyChange: {
      type: Function,
      default: () => {}
    },
    onReady: {
      type: Function,
      default: () => {}
    }
  },

  mounted () {
    this.$el.addEventListener('message', this._handleMessage)

    window.addEventListener('keydown', this.keypress)

    this.property('cursor-autohide', 'always')
  },

  beforeDestroy () {
    window.removeEventListener('keydown', this.keypress)
  },

  methods: {
    /**
     * Send a command to the player.
     *
     * @param {string} cmd - Command name
     * @param {...*} args - Arguments
     */
    command (cmd, ...args) {
      args = args.map(arg => arg.toString())
      this._postData('command', [cmd].concat(args))
    },

    /**
     * Set a property to a given value.
     *
     * @param {string} name - Property name
     * @param {*} value - Property value
     */
    property (name, value) {
      this._postData('set_property', { name, value })
    },

    /**
     * Get a notification whenever the given property changes.
     *
     * @param {string} name - Property name
     */
    observe (name) {
      this._postData('observe_property', name)
    },

    /**
     * Send a key event through mpv's input handler, triggering whatever
     * behavior is configured to that key.
     *
     * @param {KeyboardEvent} event
     */
    keypress ({ key, shiftKey, ctrlKey, altKey }) {
      // Don't need modifier events.
      if ([
        'Escape', 'Shift', 'Control', 'Alt',
        'Compose', 'CapsLock', 'Meta'
      ].includes(key)) return

      if (key.startsWith('Arrow')) {
        key = key.slice(5).toUpperCase()
        if (shiftKey) {
          key = `Shift+${key}`
        }
      }
      if (ctrlKey) {
        key = `Ctrl+${key}`
      }
      if (altKey) {
        key = `Alt+${key}`
      }

      // Ignore exit keys for default keybindings settings.
      if ([
        'q', 'Q', 'ESC', 'POWER', 'STOP',
        'CLOSE_WIN', 'Ctrl+c',
        'AR_PLAY_HOLD', 'AR_CENTER_HOLD'
      ].includes(key)) return

      this.command('keypress', key)
    },

    _postData (type, data) {
      this.$el.postMessage({ type, data })
    },
    _handleMessage ({ data: { type, data } }) {
      const actions = {
        property_change: () => this.onPropertyChange(data.name, data.value),
        ready: () => this.onReady(this)
      }
      const action = actions[type]

      action && action()
    }
  },

  render (h) {
    return this.$createElement('embed', {
      ref: 'plugin',

      staticClass: 'mpv-wrapper',
      style: this.style,
      attrs: {
        type: this.mimeType
      }
    })
  }
}
</script>

It's highly inspired by the React component given by mpv.js. It can be used just like any component:

<template>
  <mpv-wrapper 
      :onReady='handleMPVReady',
      :onPropertyChange='handlePropertyChange'
  />
</template>

<script>
import MpvWrapper from '/path/to/wrapper.vue'

export default {
  components: { MpvWrapper },

  data: () => ({
    mpv: null
  }),

  methods: {
    handleMPVReady (mpv) {
      this.mpv = mpv
      console.log('Player is ready')
    },
    handlePropertyChange (name, value) {
      console.log('Property change:', name, value)
    }
  }
}
</script>

If needed, I can PR this into the lib. Hope it'll help someone 😄

[Benny233]

If this helps, I made a Vue component fully compatible:

<script>
export default {
  name: 'MpvWrapper',

  data: () => ({
    style: {
      display: 'block',
      width: '100%',
      height: '100%',
      'pointer-events': 'none' // Allows cursor to be handled directly by MPV?
    },
    plugin: null,
    mimeType: 'application/x-mpvjs',

    mouseClick: {
      left: 0,
      timeout: null
    }
  }),

  props: {
    onPropertyChange: {
      type: Function,
      default: () => {}
    },
    onReady: {
      type: Function,
      default: () => {}
    }
  },

  mounted () {
    this.$el.addEventListener('message', this._handleMessage)

    window.addEventListener('keydown', this.keypress)

    this.property('cursor-autohide', 'always')
  },

  beforeDestroy () {
    window.removeEventListener('keydown', this.keypress)
  },

  methods: {
    /**
     * Send a command to the player.
     *
     * @param {string} cmd - Command name
     * @param {...*} args - Arguments
     */
    command (cmd, ...args) {
      args = args.map(arg => arg.toString())
      this._postData('command', [cmd].concat(args))
    },

    /**
     * Set a property to a given value.
     *
     * @param {string} name - Property name
     * @param {*} value - Property value
     */
    property (name, value) {
      this._postData('set_property', { name, value })
    },

    /**
     * Get a notification whenever the given property changes.
     *
     * @param {string} name - Property name
     */
    observe (name) {
      this._postData('observe_property', name)
    },

    /**
     * Send a key event through mpv's input handler, triggering whatever
     * behavior is configured to that key.
     *
     * @param {KeyboardEvent} event
     */
    keypress ({ key, shiftKey, ctrlKey, altKey }) {
      // Don't need modifier events.
      if ([
        'Escape', 'Shift', 'Control', 'Alt',
        'Compose', 'CapsLock', 'Meta'
      ].includes(key)) return

      if (key.startsWith('Arrow')) {
        key = key.slice(5).toUpperCase()
        if (shiftKey) {
          key = `Shift+${key}`
        }
      }
      if (ctrlKey) {
        key = `Ctrl+${key}`
      }
      if (altKey) {
        key = `Alt+${key}`
      }

      // Ignore exit keys for default keybindings settings.
      if ([
        'q', 'Q', 'ESC', 'POWER', 'STOP',
        'CLOSE_WIN', 'Ctrl+c',
        'AR_PLAY_HOLD', 'AR_CENTER_HOLD'
      ].includes(key)) return

      this.command('keypress', key)
    },

    _postData (type, data) {
      this.$el.postMessage({ type, data })
    },
    _handleMessage ({ data: { type, data } }) {
      const actions = {
        property_change: () => this.onPropertyChange(data.name, data.value),
        ready: () => this.onReady(this)
      }
      const action = actions[type]

      action && action()
    }
  },

  render (h) {
    return this.$createElement('embed', {
      ref: 'plugin',

      staticClass: 'mpv-wrapper',
      style: this.style,
      attrs: {
        type: this.mimeType
      }
    })
  }
}
</script>

It's highly inspired by the React component given by mpv.js. It can be used just like any component:

<template>
  <mpv-wrapper 
      :onReady='handleMPVReady',
      :onPropertyChange='handlePropertyChange'
  />
</template>

<script>
import MpvWrapper from '/path/to/wrapper.vue'

export default {
  components: { MpvWrapper },

  data: () => ({
    mpv: null
  }),

  methods: {
    handleMPVReady (mpv) {
      this.mpv = mpv
      console.log('Player is ready')
    },
    handlePropertyChange (name, value) {
      console.log('Property change:', name, value)
    }
  }
}
</script>

If needed, I can PR this into the lib. Hope it'll help someone 😄

hi, i try to use your code. but i failed. is there any other code or config i need to do?

[Kylart]

I'm afraid I'd need more details here 🤔
Is the code online?

[iffa]

a quick browse of the fork network: https://github.com/pavladan/mpv.js

tested this fork, works perfectly with no react dependency 👍

[guest271314]

FWIW am not sure why this question Playing audio files in unsupported codecs through tag over at SO received a "downvote" already. The case appears to be precisely solvable by using this repository. Tested loading both CAF and AMR at native mpv where plays both files are played.

[anesuc]

@TRPB I've been trying to use your JS way. How do you even trigger play for example?