How to use slots on qmediaplayer?

  • I’ve searched for Vue slots and everything I’ve tried doesn’t seem to work. I’m using it to play live audio so I want to replace the duration slot with the word “Live”?

    I have tried different combinations like:

    <q-media-player type="audio">
    <span slot="duration-time">Live</span>

  • Thanks, I’ve tried that. I tried the other slots and they didn’t work either. I think I have found the issue. The function h() inside of __renderDurationTime(h)

    __renderDurationTime(h) {
            return h('span', {
              staticClass: 'q-media__controls--video-time-text' + ' text-' + this.color
            }, this.state.durationTime, slot(this, 'durationTime'))
            // TODO: syntax on above line??

    refers to the function createElement()

    function createElement (
    ) {
      if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children;
        children = data;
        data = undefined;
      if (isTrue(alwaysNormalize)) {
        normalizationType = ALWAYS_NORMALIZE;
      return _createElement(context, tag, data, children, normalizationType)

    As you can see in createElement() if data is an array then children is overwritten. As the slot is in the var children it is overwritten so ignored. I have tested with the following and it works as it should:

          __renderDurationTime(h) {
            let a = 'span'
            let b = {
              staticClass: 'q-media__controls--video-time-text' + ' text-' + this.color
            let c = this.state.durationTime
            let d = slot(this, 'durationTime')
            c = d ? d : c
            return h(a, b, c)
            // TODO: syntax on above line??


                  <div slot="durationTime"><b>Live</b></div>

  • I’ll be fixing the slots in QMediaPlayer. It seems some are working and some not. Stay tuned for an announcement today or tomorrow. Thanks.

Log in to reply