OXID 6 | HTML5 Video in Produktdetails anzeigen

Wenn du im OXID eShop ein HTML5 Video für deine Produkte hinterlegen möchtest und dabei auf Youtube und Co verzichten willst, dann sind ein paar Anpassungen in der media.tpl nötig.
In meinem Beispiel binde ich Videos mittels HTML5 Video Element ein. Die Datei selbst findest du unter dem Pfad:

\source\Application\views\deinTemplate\tpl\page\details\inc\media.tpl

Hier ersetzt du den kompletten Abschnitt zwischen folgendem Original-Inhalt:

[{if $oView->getMediaFiles()}]
	...
[{/if}]

Damit du Youtube Videos weiterhin verwenden kannst, fügst du in den Abschnitt erstmal folgendes:

[{if $blIsYouTubeMedia}]
  [{foreach from=$oView->getMediaFiles() item="oMediaUrl" name="mediaURLs"}]
    [{assign var="sUrl" value=$oMediaUrl->oxmediaurls__oxurl->value}]
    [{assign var="blIsYouTubeMedia" value=false}]
    [{if $sUrl|strpos:'youtube.com' || $sUrl|strpos:'youtu.be'}]
      [{assign var="blIsYouTubeMedia" value=true}]
    [{/if}]
    [{if !$smarty.foreach.mediaURLs.first}]
      <hr/>
    [{/if}]
    <div class="embed-responsive embed-responsive-4by3">
	[{$oMediaUrl->getHtml()}]
    </div>
  [{/foreach}]
[{/if}]

Direkt darunter kommt dann folgender Codeabschnitt für das HTML5 Video Element:

<video width="1920" height="1080" controls>
  [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"mp4"}]
    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">
  [{/if}]
  [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"ogg"}]
    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/ogg">
  [{/if}]
  [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"webm"}]
    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/webm">
  [{/if}]
  <div class="alert alert-danger">Your browser does not support the video tag.</div>
</video>

HTML5 Video unterstützt drei Formate – MP4, WebM und Ogg. Grundsätzlich unterstützen die meisten aktuellen Browser das Format MP4.
Damit aber wirklich keine Probleme bei der Darstellung auftauchen, solltest du die Videos in den drei Formaten hinterlegen.

Mit den if Abfragen und dem PHP Befehl „strstr“ prüfen wir ob das hochgeladene Video eines der drei Dateiendungen hat.

[{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"Dateiendung"}]

Der komplette Abschnitt in der media.tpl sieht bei mir danach wie folgt aus:

[{if $oView->getMediaFiles()}]
  [{if $blIsYouTubeMedia}]
    [{foreach from=$oView->getMediaFiles() item="oMediaUrl" name="mediaURLs"}]
      [{assign var="sUrl" value=$oMediaUrl->oxmediaurls__oxurl->value}]
      [{assign var="blIsYouTubeMedia" value=false}]
      [{if $sUrl|strpos:'youtube.com' || $sUrl|strpos:'youtu.be'}]
        [{assign var="blIsYouTubeMedia" value=true}]
      [{/if}]
      [{if !$smarty.foreach.mediaURLs.first}]
        <hr/>
      [{/if}]
      <div class="embed-responsive embed-responsive-4by3">
        [{$oMediaUrl->getHtml()}]
      </div>
    [{/foreach}]
  [{/if}]
  
  <video width="1920" height="1080" controls>
    [{foreach from=$oView->getMediaFiles() item="oMediaUrl" name="mediaURLs"}]
      [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"mp4"}]
        <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">
      [{/if}]
      [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"ogg"}]
        <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/ogg">
      [{/if}]
      [{if $oMediaUrl->oxmediaurls__oxurl->value|strstr:"webm"}]
        <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/webm">
      [{/if}]
    [{/foreach}]
    <div class="alert alert-danger">Your browser does not support the video tag.</div>
  </video>
[{/if}]

Getestet mit OXID eShop 6.1.4

* Werbung/Affiliate Link

Schreibe einen Kommentar

Erforderliche Felder sind entsprechend markiert.

Wird nicht veröffentlicht.

Datenschutz
Programmier-Tipps - Programmieren lernen ist nicht schwer!

Wir verwenden Cookies, um unsere Webseite für Dich optimal zu gestalten, fortlaufend zu verbessern und die Zugriffe auf unsere Webseite zu analysieren. Cookie-Informationen werden in deinem Browser gespeichert und helfen uns zu verstehen, welche Abschnitte der Website für dich am interessantesten und nützlichsten sind. Genauere Informationen findest du in unserer Datenschutzerklärung.

Notwendige Cookies

Notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können. Details findest du in unserer Datenschutzerklärung.

Google AdSense

Diese Website benutzt Google AdSense, einen Dienst zum Einbinden von Werbeanzeigen der Google Inc. ("Google"). Google AdSense verwendet sogenannte „Cookies“, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website ermöglichen. Genauere Informationen findest du in unserer Datenschutzerklärung.

Diesen Cookie aktiviert zu lassen, unterstützt uns ohne dass du Geld ausgeben musst.

Google Analytics

Diese Website nutzt den Webanalysedienst Google Analytics, der sogenannte Cookies einsetzt. Dies sind kleine Textdateien, die auf Ihrem Device gespeichert werden und eine Analyse der Website-Nutzung ermöglichen. Die erzeugten Informationen werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert. Weitere Informationen findest du in unserer Datenschutzerklärung.

Das aktivieren ermöglicht es uns unsere Webseite für dich noch attraktiver zu machen.