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

OXID 6 | HTML5 Video in Produktdetails anzeigen

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

Schreibe einen Kommentar Antworten abbrechen

Weitere Beiträge