Go To Github

COMPONENT

c-video

Demo Section

Each variation will be presented in the following sections.

Default video

Technical Details

README

Bower versionGitter Chat

Video

Description

A video component supporting WebM, MP4 and Subtitles.

Installation

Installation with Veams

veams install vc video

Installation with Bower

bower install veams-component-video --save

Fields

Settings

  • settings.videoContextClass {String} [default] - Context class of component.
  • settings.videoClasses {String} - Modifier classes for component.
  • settings.videoOptions {String} - Apply multiple options as string.

Content

  • content.videoPoster {String} - Url to a poster image.
  • content.videoMp4 {String} - Url to mp4 video file.
  • content.videoWebm {String} - Url to webm video file.
  • content.videoTrack {Object} - Object which contains tracking data.
  • content.videoTrack.trackSrc {String} - Url to track file.
  • content.videoTrack.trackSubtitle {String} - Subtitle.
  • content.videoTrack.trackLang {String} - Language.
  • content.videoTrack.trackLabel {String} - Label.
Data File
{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default video",
				"sectionCenter": true
			},
			"settings": {
				"videoContextClass": false,
				"videoClasses": false,
				"videoOptions": "controls buffer"
			},
			"content": {
				"videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg",
				"videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
				"videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm",
				"videoTrack": {
					"trackSubtitle": false,
					"trackLang": false,
					"trackLabel": false
				}
			}
		}
	}
}
Templates

c-video

<video class="c-video{{#if settings.videoContextClass}}--{{settings.videoContextClass}}{{else}}--default{{/if}}{{#if settings.videoClasses}} {{settings.videoClasses}}{{/if}}"
       data-css="c-video"
       poster="{{getUrl content.videoPoster}}" {{settings.videoOptions}}
       tabindex="0">
	{{#if content.videoMp4}}
		<source src="{{getUrl content.videoMp4}}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
	{{/if}}
	{{#if content.videoWebm}}
		<source src="{{getUrl content.videoWebm}}" type='video/webm; codecs="vp8, vorbis"'/>
	{{/if}}
	{{#if content.videoTrack}}
		<track src="{{getUrl content.trackSrc}}" kind="{{content.trackSubtitle}}" srclang="{{content.trackLang}}"
		       label="{{content.trackLabel}}"/>
	{{/if}}
</video>
Styles
/* ===================================================
COMPONENT: VIDEO
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-video"] {
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-video--default {
}
HTML Output

Default video

<video class="c-video--default" data-css="c-video" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" controls buffer tabindex="0">
		<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
		<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"'/>
		<track src="" kind="" srclang=""
		       label=""/>
</video>