Documentation · ViewHelper reference

XSD schema file | vhs master

Media / VideoViewHelper

Renders HTML code to embed a HTML5 video player. NOTICE: This is all HTML5 and won't work on browsers like IE8 and below. Include some helper library like videojs.com if you need to suport those. Source can be a single file, a CSV of files or an array of arrays with multiple sources for different video formats. In the latter case provide array keys 'src' and 'type'. Providing an array of sources (even for a single source) is preferred as you can set the correct mime type of the video which is otherwise guessed from the filename's extension. /

  • Tag usage example

    <v:media.video src="[mixed]" relative="1" class="NULL" dir="NULL" id="NULL" lang="NULL" style="NULL" title="NULL" accesskey="NULL" tabindex="123" onclick="NULL" forceClosingTag="1" hideIfEmpty="1" contenteditable="NULL" contextmenu="NULL" draggable="NULL" dropzone="NULL" translate="NULL" spellcheck="NULL" hidden="NULL" width="123" height="123" autoplay="1" controls="1" loop="1" muted="1" poster="NULL" preload="'auto'" unsupported="NULL">
    	<!-- tag content - may be ignored! -->
    </v:media.video>
  • Inline usage example

    {v:media.video(src: [mixed], relative: 1, class: 'NULL', dir: 'NULL', id: 'NULL', lang: 'NULL', style: 'NULL', title: 'NULL', accesskey: 'NULL', tabindex: 123, onclick: 'NULL', forceClosingTag: 1, hideIfEmpty: 1, contenteditable: 'NULL', contextmenu: 'NULL', draggable: 'NULL', dropzone: 'NULL', translate: 'NULL', spellcheck: 'NULL', hidden: 'NULL', width: 123, height: 123, autoplay: 1, controls: 1, loop: 1, muted: 1, poster: 'NULL', preload: ''auto'', unsupported: 'NULL')}

Arguments

Argument Description Type
accesskey

Keyboard shortcut to access this element

string
autoplay

Specifies that the video will start playing as soon as it is ready.

boolean
class

CSS class(es) for this element

string
contenteditable

Specifies whether the contents of the element are editable.

string
contextmenu

The value of the id attribute on the menu with which to associate the element as a context menu.

string
controls

Specifies that video controls should be displayed (such as a play/pause button etc).

boolean
dir

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

string
draggable

Specifies whether the element is draggable.

string
dropzone

Specifies what types of content can be dropped on the element, and instructs the UA about which actions to take with content when it is dropped on the element.

string
forceClosingTag

If TRUE, forces the created tag to use a closing tag. If FALSE, allows self-closing tags.

boolean
height

Sets the height of the video player in pixels.

integer
hidden

Specifies that the element represents an element that is not yet, or is no longer, relevant.

string
hideIfEmpty

Hide the tag completely if there is no tag content

boolean
id

Unique (in this file) identifier for this HTML element.

string
lang

Language for this element. Use short names specified in RFC 1766

string
loop

Specifies that the video will start over again, every time it is finished.

boolean
muted

Specifies that the audio output of the video should be muted.

boolean
onclick

JavaScript evaluated for the onclick event

string
poster

Specifies an image to be shown while the video is downloading, or until the user hits the play button.

string
preload

Specifies if and how the author thinks the video should be loaded when the page loads. Can be "auto", "metadata" or "none".

string
relative

If FALSE media URIs are rendered absolute. URIs in backend mode are always absolute.

boolean
spellcheck

Specifies whether the element represents an element whose contents are subject to spell checking and grammar checking.

string
src

Path to the media resource(s). Can contain single or multiple paths for videos/audio (either CSV, array or implementing Traversable).

mixed
style

Individual CSS styles for this element

string
tabindex

Specifies the tab order of this element

integer
title

Tooltip text of element

string
translate

Specifies whether an elements attribute values and contents of its children are to be translated when the page is localized, or whether to leave them unchanged.

string
unsupported

Add a message for old browsers like Internet Explorer 9 without video support.

string
width

Sets the width of the video player in pixels.

integer
Required attribute

Revision history

commit 86b105c6771d22fe9a43eb49c53bf70636067012
Author: Bjoern Fromme <*****@bjo3rn.com>
Date:   Wed Jan 30 09:40:02 2013 +0100

    [TASK] Move image and video VHs to ViewHelpers\Media subpackage

commit 68e0a32314e39b83c09296ffedba4002f881d9cc
Author: Bjoern Fromme <*****@bjo3rn.com>
Date:   Wed Jan 30 11:36:48 2013 +0100

    [BUGFIX] Remove src argument from base class

commit 0c27e716778c8debf113dd40f0d103712a052b26
Author: Claus Due <*****@wildside.dk>
Date:   Fri Feb 1 10:29:00 2013 +0100

    [TASK] VideoViewHelper indentations to tabs

commit a0f301e7a1129d627cea1b31e5313e8ff210eae0
Author: Claus Due <*****@wildside.dk>
Date:   Fri Feb 1 10:29:51 2013 +0100

    [DOC] A*****@throws annotation on Media / Video ViewHelper

commit 49e420d2ea1ed07923a3e256a6a152b41c306869
Author: Claus Due <*****@wildside.dk>
Date:   Fri Feb 1 10:36:57 2013 +0100

    [TASK] Make src argument global for all media related VHs and allow array or Traversable objects

commit c89255135c1ca2ad8d4438cb1870c753f35032a9
Author: Thomas Off <*****@googlemail.com>
Date:   Tue Oct 8 09:23:09 2013 +0200

    [BUGFIX] Fix missing parameter which causes the child element not to be appended.

commit 5c3425d9b3ba44e086c054f51409fa6829712fa7
Author: Björn Fromme <*****@bjo3rn.com>
Date:   Fri Dec 20 12:06:21 2013 +0100

    [TASK] More flexible source argument

commit da31bad1d9bb058c072ddb5591e8ed907a1ae8e1
Author: Claus Due <*****@namelesscoder.net>
Date:   Tue Dec 31 23:08:37 2013 +0100

    [TASK] Happy new year!

commit d2e531da034976e6db1478eef5a8478595fd16fe
Author: Claus Due <*****@namelesscoder.net>
Date:   Sun Jan 5 00:45:10 2014 +0100

    [TASK] Migrate to using namespace core class names

commit 52bd6e41ccfef3d8193b350153912a9716e6a087
Author: Benjamin Rau <*****@codearts.at>
Date:   Tue Apr 1 21:09:00 2014 +0200

    [TASK] CGL compliance

commit 15dfd8de9bd92827cadbe890c5743e07e4116739
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jun 1 02:14:18 2014 +0200

    [BUGFIX] Match all remote sources incl CDN (spdy) #586

commit 2ab22ba0aea68df20648d796748d1efc4e563b84
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jun 1 03:38:31 2014 +0200

    [BUGFIX] Remote URL condition was always false

commit e4d87a5ef0b9288312ecf84c472b37fecdc33e8d
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jun 1 01:55:16 2014 +0200

    [BUGFIX] Support mapping between file extensions and mime-type in Media Video Viewhelper #583

commit b599de2e65246e5d9883333ae9e9e70900ce149b
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jun 1 02:45:10 2014 +0200

    [FEATURE] Add unsupported browser message #584

commit da7677bc74f14e9a9300e4ba4487e52c3cb97642
Author: Claus Due <*****@namelesscoder.net>
Date:   Sun Apr 20 01:13:33 2014 +0200

    [TASK] Switch to namespaces

commit 6c824e5a90db971fb9cb1108229bfe07cbae7623
Author: Lars Peter Søndergaard <*****@lichtflut-medien.de>
Date:   Fri Dec 19 10:50:03 2014 +0100

    [BUGFIX] Incorrect order of arguments.

commit 8bb2fc5ee124ba19b0a0ab8e061c9a153fc4651f
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jan 18 17:56:13 2015 +0100

    [TASK] Reference Copyright to license.md file