### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# 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>