Video

A video component with custom controls

Usage

To apply the video component to an element add the data-f-video attribute to a container element that has the specific video HTML found below. If you have a few videos the player will automatically load the next one when the last video has finished playing (if required).

You can also have captions that show and hide at certain frames in the video by using a data attribute. More on this later.

Example

Markup

<div class="f-video" data-f-video="{ option: value }">
	<!-- First video - repeat for as many videos as you need -->
	<div class="f-video-container">
		<!-- Video loading icon -->
		<svg class="f-video-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
			<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
		</svg>
		<!-- Video controls - optional, pick and choose which are required -->
		<div class="f-video-controls f-flex f-flex-middle">
			<button class="f-btn f-video-play" type="button" role="button" aria-label="Play video"><i class="material-icons">play_arrow</i></button>
			<button class="f-btn f-video-pause" type="button" role="button" aria-label="Pause video"><i class="material-icons">pause</i></button>
			<span class="f-video-played">00:00</span>
			<div class="f-video-progress-bar f-flex-grow">
				<div class="f-video-progress">
					<!-- Only really needed if you don't have the time elapsed and duration -->
					<div class="f-video-progress-inner">
						<span class="f-video-progress-time"></span>
						<span class="f-video-progress-value"></span>
					</div>
				</div>
				<div class="f-video-buffer"></div>
			</div>
			<span class="f-video-duration">00:00</span>
			<button class="f-btn f-video-mute f-video-muted" type="button" aria-label="mute / unmute"><i class="material-icons f-volume-off">volume_off</i><i class="material-icons f-volume-up">volume_up</i></button>
			<div class="f-video-volume"><div class="f-video-volume-bar" aria-label="volume level" role="slider" aria-valuemin="0" aria-valuemax="1" aria-readonly="false" tabindex="0" aria-disabled="false" aria-valuenow="1" aria-valuetext="1"></div></div>
			<button class="f-btn f-video-previous" type="button" role="button" aria-label="Play previous video"><i class="material-icons">first_page</i></button>
			<button class="f-btn f-video-next" type="button" role="button" aria-label="Play next video"><i class="material-icons">last_page</i></button>
		</div>
		<!-- Progress overlay, if required overlays the video when progress control is hovered -->
		<div class="f-video-progress-overlay"></div>
		<!-- The actual video element -->
		<video preload="none" muted>
			<source src="/images/BuckBunnyClip1.mp4" type="video/mp4">
		</video>
		<!-- A nice (dotted) video overlay -->
		<div class="f-video-overlay"></div>
		<!-- Captions to show over the video -->
		<div class="f-video-caption">
			<h1 data-animation-start="5" data-animation-end="12">Amazing New Adventures</h1>
		</div>
		<div class="f-video-caption">
			<h1 data-animation-start="13" data-animation-end="19">More New Adventures</h1>
			<p data-animation-start="15" data-animation-end="19">Text to go in here</p>
		</div>
	</div>
</div>

Controls

There are 3 options for the controls position. The default is at the bottom on hover. If you add the f-video-controls-top class to the controls element the hover will bring them in from the top. The final option is to have them fixed below the video. Add a class of f-video-controls-fixed to f-video-container.

Example

<div class="f-video-container f-video-controls-fixed">
	<div class="f-video-controls f-flex f-flex-middle"></div>
</div>
<!-- OR -->
<div class="f-video-container">
	<div class="f-video-controls f-video-controls-top f-flex f-flex-middle"></div>
</div>

The example markup at the top of the page gives you all control options but you don't have to include all or any of the controls. Because they are styled using some basic flexbox they will shrink and grow depending on how many items there are.

Captions

You can have as many caption elements as you need and for each you need one or more nested elements that contain a data-animation-start (optionally data-animation-end) attribute, the value of which corresponds to the second of the video you would like the caption to show (and end).

Example

<div class="f-video-caption">
	<h1 data-animation-start="13" data-animation-end="19">Show at 13 seconds, hide at 19 seconds</h1>
	<p data-animation-start="15" data-animation-end="19">Show at 15 seconds, hide at 19 seconds</p>
</div>

JavaScript options

Init element manually

let objVideo = FatKit.video(videocontainer, { /* options */ });

Events