Video  

{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}" preload="{cObj.allSettings.preload}" /> </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>

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