Videodarstellung im Shop

Deutsches Forum
1

Ich würde gerne Produktvideos (Format mp4) auf dem eigene Server liegend und unabhängig von youtube im Shop abspielen lassen. Gibt es da ein Modul oder eine detailierte Anleitung, wie man das im Shop realisieren könnte?

2

Funktionieren die Mediendateien im Artikelstamm unter Erweitert nicht?

3

Wenn das Video dort im Backend hochgeladen wird, erscheint das Video im Frontend lediglich als Verlinkung. Ein direktes Abspielen auf der Detailseite ist nicht möglich.

4

Hi etoys,

in der media.tpl kannst du mit dem Link anstellen was du willst. Z.B. ein HTML5 Video einbinden.
Bei source trägst du halt den Link ein.

<source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">

HTML5 Video

5

Wo genau gehört das hier rein?

[{assign var=“oConfig” value=$oViewConf->getConfig()}]
[{if $oDetailsProduct->oxarticles__oxfile->value}]
[{$oDetailsProduct->oxarticles__oxfile->value}]
[{/if}]
[{if $oView->getMediaFiles()}]
[{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’ || $sUrl|strpos:‘youtube-nocookie.com’}]
[{assign var=“blIsYouTubeMedia” value=true}]
[{/if}]
[{if !$smarty.foreach.mediaURLs.first}]


[{/if}]
[{if $blIsYouTubeMedia}]

[{$oMediaUrl->getHtml()}]

[{else}]

[{$oMediaUrl->getHtml()}]

[{/if}]
[{/foreach}]
[{/if}]
6

Gibt die URL mit Link aus. Kannst somit ersetzen.

7

Habe das nun wie unten reinkopiert. Nun erscheint der Link nicht mehr, aber auch kein Video. Der Rahmen bleibt leer.

    [{if $blIsYouTubeMedia}]
        <div class="media-youtube embed-responsive embed-responsive-16by9">
            [{$oMediaUrl->getHtml()}]
        </div>
    [{else}]
        <div class="media-file btn btn-default btn-sm btn-block">
            <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">
        </div>
    [{/if}]
[{/foreach}]

[{/if}]

8

Schau dir bitte noch mal den Link an wie ein HTML5 aufgebaut sein muss:

HTML5 Video

9

Super. Hat geklappt! Vielen Dank!!!

    [{else}]
        <div class="media-file btn btn-default btn-sm btn-block">
        <video width="320" height="240" controls>
            <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">  </video>
        </div>
    [{/if}]
10

muss man halt alle wichtigen browser durchtesten…

11

Wenn man sich beim Upload an eine bestimmte Abfolge hält, kann man dass auch mit iteration lösen.

<video width="320" height="240" controls>
            [{foreach from=$oView->getMediaFiles() item="oMediaUrl" name="mediaURLs"}]
                [{if $smarty.foreach.mediaURLs.iteration == 1}]
                    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/mp4">
                [{/if}]
                [{if $smarty.foreach.mediaURLs.iteration ==2}]
                    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/ogv">
                [{/if}]
                [{if $smarty.foreach.mediaURLs.iteration == 3}]
                    <source src="[{$oViewConf->getBaseDir()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]" type="video/webm">
                [{/if}]
            [{/foreach}]
            Your browser does not support the video tag.
        </video>

Aber im Grunde können die gängigsten Browser mpg4.

12

[{ if $oMediaUrl->oxmediaurls__oxurl->value|strstr:“mp4” }]

oder sowas ähnliches, dann ist die reihenfolge egal

13

Ich habe es jetzt mal mit den aktuellen Browsern Opera, Internet Explorer, Firefox und Chrome getestet. Wird überall problemlos angezeigt und abgespielt.