Mit diesem Element können Youtube-, Vimeo- oder auf dem Webspace befindliche Videos einfach in ein Bakehouse eingebunden werden.
bh
Video-Element
HTML-Template: Resources/Private/Partials/Video.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<f:if condition="{cObj.allSettings.videos} != 0">
<f:then>
<div class="{cObj.settings.html5video-aspectratio} bhHtml5VideoElement">
<bh:video source="{cObj.allSettings.videos}" poster="{cObj.allSettings.poster}"
controls="{cObj.allSettings.html5videoControls}" muted="{cObj.allSettings.html5videoMuted}"
autoplay="{cObj.allSettings.html5videoAutoplay}" loop="{cObj.allSettings.html5videoLoop}"
playsinline="{cObj.allSettings.playsinline}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.settings.yt-link}">
<div class="yt-wizard-wrapper {cObj.settings.yt-aspectratio}">
<iframe
data-thirdcountry-src="https://www.youtube-nocookie.com/embed/{cObj.settings.yt-link}?autoplay={cObj.settings.yt-autoplay}&controls={cObj.settings.yt-controls}&rel={cObj.settings.yt-rel}&start={cObj.allSettings.yt-start}&end={cObj.allSettings.yt-end}"
frameborder="0" {cObj.allSettings.yt-fs}
allow="{f:if(condition:'{cObj.settings.yt-autoplay}',then:'autoplay;')} {f:if(condition:'{cObj.settings.yt-fs} == \'allowfullscreen\'',then:'fullscreen;')}"></iframe>
</div>
</f:if>
<f:if condition="{cObj.settings.vi-input}">
<div class="vi-wizard-wrapper {cObj.settings.vi-aspectratio}">
<iframe
data-thirdcountry-src="https://player.vimeo.com/video/{cObj.settings.vi-link}?color={cObj.settings.vi-color}&byline={cObj.settings.vi-byline}&portrait={cObj.settings.vi-portrait}&title={cObj.settings.vi-title}&loop={cObj.settings.vi-loop}&autoplay={cObj.settings.vi-autoplay}&dnt=1"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</f:if>
</f:else>
</f:if>
</bh:tmpl.element>
Settings-HTML: Configuration/BheForms/Video.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-morelink">
<div class="bhe-morelink-link">Youtube</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div class="bhe-formsettings-option">
<label>Video<i> (Url oder ID)</i></label>
<f:form.textfield style="width: 250px; font-size: 11px;" name="yt-input" id="yt-input"
value="{cObj.settings.yt-input}" />
<f:form.hidden name="yt-link" id="yt-link" value="{cObj.settings.yt-link}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="yt-aspectratio" value="{cObj.allSettings.yt-aspectratio}"
options="{cObj.allSettings.yt-aspectratio-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Startpunkt <i>(Sekunden)</i></label>
<f:form.textfield name="yt-start" value="{cObj.settings.yt-start}" />
</div>
<div class="bhe-formsettings-option">
<label>Endpunkt <i>(Sekunden)</i></label>
<f:form.textfield name="yt-end" value="{cObj.settings.yt-end}" />
</div>
<div class="bhe-formsettings-option">
<label>Video automatisch starten</label>
<f:form.select name="yt-autoplay" value="{cObj.allSettings.yt-autoplay}"
options="{cObj.allSettings.yt-autoplay-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>nach Video-Ende</label>
<f:form.select name="yt-rel" value="{cObj.allSettings.yt-rel}"
options="{cObj.allSettings.yt-rel-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Player-Buttons</label>
<f:form.select name="yt-controls" value="{cObj.allSettings.yt-controls}"
options="{cObj.allSettings.yt-controls-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Vollbild-Modus</label>
<f:form.select name="yt-fs" value="{cObj.allSettings.yt-fs}"
options="{cObj.allSettings.yt-fs-opt}" />
</div>
<f:comment>
<div class="bhe-formsettings-option">
<label>Playlist <i>(IDs mit Beistrich trennen)</i></label>
<f:form.textfield name="yt-playlist" value="{cObj.settings.yt-playlist}" />
</div>
</f:comment>
</div>
</div>
</div>
<div class="bhe-morelink">
<div class="bhe-morelink-link">Vimeo</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div class="bhe-formsettings-option">
<label>Video<i> (Url oder ID)</i></label>
<f:form.textfield style="width: 250px; font-size: 11px;" name="vi-input" id="vi-input"
value="{cObj.settings.vi-input}" />
<f:form.hidden name="vi-link" id="vi-link" value="{cObj.settings.vi-link}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="vi-aspectratio" value="{cObj.allSettings.vi-aspectratio}"
options="{cObj.allSettings.vi-aspectratio-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Video automatisch starten</label>
<f:form.select name="vi-autoplay" value="{cObj.allSettings.vi-autoplay}"
options="{cObj.allSettings.vi-autoplay-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Endlosschleife</label>
<f:form.select name="vi-loop" value="{cObj.allSettings.vi-loop}"
options="{cObj.allSettings.vi-loop-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden"
data-tooltip-view="extended">Video-Titel</label>
<f:form.select name="vi-title" value="{cObj.allSettings.vi-title}"
options="{cObj.allSettings.vi-title-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden"
data-tooltip-view="extended">Name des Vimeo-Users</label>
<f:form.select name="vi-byline" value="{cObj.allSettings.vi-byline}"
options="{cObj.allSettings.vi-byline-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden"
data-tooltip-view="extended">Bild des Vimeo-Users</label>
<f:form.select name="vi-portrait" value="{cObj.allSettings.vi-portrait}"
options="{cObj.allSettings.vi-portrait-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden"
data-tooltip-view="extended">Farbe Player <i>(Hex-Wert ohne #)</i></label>
<f:form.textfield name="vi-color" value="{cObj.settings.vi-color}" />
</div>
</div>
</div>
</div>
<div class="bhe-morelink">
<div class="bhe-morelink-link">HTML5 Video (mp4)</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div style="line-height: 17px;">Um ein Video aus dem Media-Cake in einem HTML5 Video Element anzuzeigen,
bitte bitte hier die Video Datei auswählen oder hochladen. Wir empfehlen das Video mit einer
Datenrate von <span style="color: #c8f36b">maximal <b>2 Mbit/s</b></span> zu codieren. Das Video
wird nicht automatisch konvertiert.<br><br>Hier können mehrere Dateien abgelegt werden. Falls nur
eine Datei abgelegt wird, empfehlen wir h264. <br><br></div>
<!-- Mini MediaCake -->
<div class="bhe-formsettings-option bhe-form-field-type-mediacake">
<label>Videos</label>
<f:if condition="{cObj.allSettings.videos}">
<f:then>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository"
method="findByUids" options="{cObj.allSettings.videos}" as="videos">
<bh:form.mediacake name="videos" value="{videos}" />
</bh:repository.load>
</f:then>
<f:else>
<bh:form.mediacake name="videos" value="{videos}" />
</f:else>
</f:if>
</div>
<!-- Mini MediaCake -->
<div class="bhe-formsettings-option bhe-form-field-type-mediacake">
<label>Poster-Bild</label>
<f:if condition="{cObj.allSettings.videos}">
<f:then>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository"
method="findByUids" options="{cObj.allSettings.poster}" as="poster">
<bh:form.mediacake name="poster" value="{poster}" />
</bh:repository.load>
</f:then>
<f:else>
<bh:form.mediacake name="poster" value="{poster}" />
</f:else>
</f:if>
</div>
<div class="bhe-formsettings-option">
<label>Steuerelemente anzeigen</label>
<f:form.checkbox name="html5videoControls" value="controls"
checked="{cObj.allSettings.html5videoControls}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended"
data-tooltip="Autoplay funktioniert aufgrund von Einschränkungen des Browsers nur wenn auch 'muted' ausgewählt ist.">Autoplay
(setzt muted und inline)</label>
<f:form.checkbox name="html5videoAutoplay" value="autoplay"
checked="{cObj.allSettings.html5videoAutoplay}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended" data-tooltip="Video wird geräuschlos abgespielt.">Muted</label>
<f:form.checkbox name="html5videoMuted" value="muted"
checked="{cObj.allSettings.html5videoMuted}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended" data-tooltip="Video wiederholt sich.">Loop</label>
<f:form.checkbox name="html5videoLoop" value="loop" checked="{cObj.allSettings.html5videoLoop}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="html5video-aspectratio" value="{cObj.allSettings.html5video-aspectratio}"
options="{cObj.allSettings.html5video-aspectratio-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended"
data-tooltip="Öffnet sich nicht automatisch im Vollbildmodus (iPhone und iPad)">Plays
Inline</label>
<f:form.checkbox name="playsinline" value="playsinline" checked="{cObj.allSettings.playsinline}" />
</div>
</div>
</div>
</div>
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}"
options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>