VIDEO (Standard Module )

src/app/shared/components/video/templates

Demo Section

Each variation will be presented in the following section.

Default video

Readme

Video

Description

A video component supporting WebM, MP4 and Subtitles.

JIRA

Installation

Installation with Veams

veams install component video

veams -i c video

Fields

video.hbs

Settings

Parameter Type Default Description
settings.videoContextClass String 'default' Context class of component.
settings.videoClasses String '' Modifier classes for component.
settings.videoOptions String '' Apply multiple options as string.

Content

Parameter Type Description
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.

Templates

video.hbs

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

Data File

video-bp.hjson

{
	"title": "Video",
	"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
				}
			}
		}
	}
}

Styles

_video.scss

/* ===================================================
COMPONENT: VIDEO
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-video"] {
	width: 100%;
}

/* ---------------------------------------------------
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>

Wonach suchst du?

Datenschutzhinweis mit Link