<audio> tag with just controls and without the poster area

[yairpe]

How can I set an audio tag to show just the controls area?

I tried height="auto" but it just show the big play button on Firefox and shows the controls area only after user clicks on it.

Also, how can I disable the full screen icon for <audio> tag?

Thank you

[yairpe]

Any thoughts?

[clark-stevenson]

I am also looking at how to best handle the Audio side. I basically just need a big play and pause button so looking into this.

You could set the following config options to turn bits and pieces of the player control bar off. In your case, I guess you just want to set fullscreenToggle=false

               "controlBar": {
                  "playToggle": false,
                  "volumeMenuButton": false,
                  "currentTimeDisplay": false,
                  "timeDivider": false,
                  "durationDisplay": false,
                  "progressControl": {
                    "seekBar": {
                      "loadProgressBar": false,
                      "mouseTimeDisplay": false,
                      "playProgressBar": false
                    }
                  },
                  "liveDisplay": false,
                  "remainingTimeDisplay": false,
                  "customControlSpacer": false,
                  "volumeControl": {
                    "volumeBar": {
                      "volumeLevel": false
                    }
                  },
                  "playbackRateMenuButton": false,
                  "chaptersButton": false,
                  "subtitlesButton": false,
                  "captionsButton": false,
                  "fullscreenToggle": false
                }

[hartman]

You can specify some extra CSS.

.video-js.vjs-audio {
    /* Reset the height of the player to the height of the controller */
    height: 3em;

    /* Who needs this ? */
    .vjs-big-play-button {
        display: none;
    }
    /* Make the controlbar visible by default */
    .vjs-control-bar {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    /* The spinner is useless when there is just the controller only mode */
    .vjs-loading-spinner {
        display: none;
    }
    /* Add another way to indicate waiting by using the progress slider */
    &.vjs-waiting .vjs-progress-holder:not( .vjs-seeking ) {
        height: .5em;
        background-image: repeating-linear-gradient(
            -45deg,
            #73859f,
            #73859f 11px,
            #eee 10px,
            #eee 20px
        );
        border-radius: 3px;
        background-size: 28px 28px;

        transition: height .5s;
        animation: vjs-slider-indeterminate .5s linear infinite;

        .vjs-play-progress {
            display: none;
        }
    }
}
@keyframes vjs-slider-indeterminate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}

I'm considering opening a patch request for a few improvements like these.

[marinaglancy]

Thanks a lot to previous comments. I needed very similar thing - responsive(!), no fullscreen button, no big play button, always show controls and hide poster area.

This is what I came up with myself: CSS:

/* Audio: Remove big play button (leave only the button in controls). */
.video-js.vjs-audio .vjs-big-play-button {
  display: none;
}
/* Audio: Make the controlbar visible by default */
.video-js.vjs-audio .vjs-control-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Make player height minimum to the controls height so when we hide video/poster area the controls are displayed correctly. */
.video-js.vjs-audio {
  min-height: 3em;
}

This is similar to what @hartman did but I use min-height: 3em; and not height: 3em;, otherwise it does not work with fluid layout that I need

data-setup:

{
  "aspectRatio": "1:0",
  "fluid": true,
  "controlBar": {"fullscreenToggle": false}
}

[jthomerson]

Thanks @marinaglancy! I searched for a while for this and then found your post. Super helpful! There should be a video.js tutorial about this!

[johnking]

somehow, I could not hide big-play-button with css

.video-js.vjs-audio .vjs-big-play-button {
  display: none;
}

but I can still change other attributes of the big-play-button when it is displayed. I am using version

 "video.js": "^6.4.0",

Does anyone know how not to display the big-play-button at all?

@marinaglancy @hartman

[johnking]

I have to use the workaround specified in thread to hide the big-play-button: Question: Is there a way to start without the bigPlayButton, but already showing the controls?

But if anyone know how to use CSS to hide the big-play-button, please share your solution.

thanks

-John

[marinaglancy]

In Moodle 3.4 we use VideoJS 6.3.2 and still use the same workaround that I described above: https://github.com/moodle/moodle/blob/MOODLE_34_STABLE/media/player/videojs/styles.css#L1404 This is how audio file looks like:

Not sure about compatibility with VideoJS 6.4.x

[johnking]

thanks for your reply @marinaglancy