Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Video Player

Huro ships with this dead simple, yet solid and customizable vanilla JS video player. You can change the controls as you'd like and easily customize the styles. We've provided an example below with player toolbar customization, native 16:9 ratio and dark mode support. Learn more about the plugin and how to use it here.


            //JS CODE
            // get target from media with controls
            const $target = document.querySelector('audio[controls], video[controls]');
            
            // assign media player from target
            const player = new MediaPlayer(
                $target,
                {
                    prefix: 'media',
                    lang: {
                        play: 'play',
                        pause: 'pause',
                        mute: 'mute',
                        unmute: 'unmute',
                        volume: 'volume',
                        currentTime: 'current time',
                        remainingTime: 'remaining time',
                        enterFullscreen: 'enter fullscreen',
                        leaveFullscreen: 'leave fullscreen',
                        download: 'download'
                    },
                    svgs: {
                        play: '#symbol-play',
                        pause: '#symbol-pause',
                        mute: '#symbol-mute',
                        unmute: '#symbol-unmute',
                        volume: '#symbol-volume',
                        currentTime: '#symbol-currentTime',
                        remainingTime: '#symbol-remainingTime',
                        enterFullscreen: '#symbol-enterFullscreen',
                        leaveFullscreen: '#symbol-leaveFullscreen',
                        download: '#symbol-download'
                    },
                    timeDir: 'ltr',
                    volumeDir: 'ltr'
                }
            );
            
            //MARKUP
            <div class="video-container">
                <video id="video-player" class="media-player" src="https://diveinto.org/media/uscenes_h-264_hd_test.mp4"
                    poster="https://diveinto.org/media/uscenes_h-264_hd_test.jpg" controls loop
                    data-options='{}'></video>
            </div>
            
            <svg class="is-hidden">
                <symbol id="symbol-play" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </symbol>
                <symbol id="symbol-pause" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect>
                </symbol>
                <symbol id="symbol-mute" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </symbol>
                <symbol id="symbol-unmute" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                    <line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line>
                </symbol>
                <symbol id="symbol-download" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </symbol>
                <symbol id="symbol-enterFullscreen" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
                </symbol>
                <symbol id="symbol-leaveFullscreen" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                    <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>
                </symbol>
            </svg>