Tangerine Development

Recently the National Museum of Nuclear Science and History needed an update to one of their existing video players. The original one used a simple monitor and physical buttons, but after over ten years of daily use it finally ceased to work. The staff thought that the easiest thing to do was to make a simple touchscreen program that would be easier to maintain long-term. I was able to complete the player in just a few days so that it could be installed quickly and fill in the gap in the exhibit.

I used Vue.js again because it's an efficient way to build a robust program, even though it was certainly overkill for this project. I've been using it a lot lately because it's so easy to set up Google Chrome for Kiosk Mode in the exhibit space. The videos were on the older side, so in order to get them to work with JavaScript and Video.js, I converted them to mp4 format. I used Video.js because it made it easy to keep the scrub bar, but hide all of the other buttons like fullscreen, volume, subtitles, etc. Need to do that, too? Here's the Stylus.

    .vjs-fullscreen-control, .vjs-play-control, .vjs-volume-panel
        display: none

    .vjs-control-bar
        background: none
        height 35px
        bottom: -35px

    .vjs-time-control
        font-size: 1.5em

I also moved the scrub bar and changed the attributes so the control bar does not autohide. You just add data-setup='{"inactivityTimeout" : 0}' to the declaration.

All in all, it was a quick-turnaround project that I'm quite happy with.