Media filters

Mit Medienfiltern können Sie URLs für die Medien eines Produkts abrufen.

Die URLs der von VersaCommerce gehosteten Videos und 3D-Modelle sind signiert, was bedeutet, dass sie ablaufen und sich ändern. Zwischenspeichern Sie keine URLs von Videos und 3D-Modellen, die von VersaCommerce gehostet werden.

Inhalt

external_video_tag

Erzeugt eine iframe, die einen Vimeo- oder YouTube-Videoplayer enthält.

Wenn für das Video ein Alt-Text festgelegt wurde, wird dieser im Attribut title des iframe angezeigt. Wenn kein Alt-Text angegeben wird, erscheint der Produkttitel im Attribut title.

{% if product.featurot_media.media_type == "external_video" %}
  {{ product.featurot_media | external_video_tag }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0">...</iframe>

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://player.vimeo.com/video/506225278?byline=0&controls=1&playsinline=1&title=0" title="Alt Text Here"></iframe>

Sie können HTML-Attribute als Optionen übergeben, um sie dem IFrame hinzuzufügen:

{% if product.featurot_media.media_type == "external_video" %}
  {{ product.featurot_media | external_video_tag: class: "youtube_video" }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube_video" src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0">...</iframe>

external_video_url

Wird verwendet, um Parameter für den externen Videoplayer zu setzen, der von external_video_tag.

  • Verfügbare Parameter für YouTube-Videos
  • Verfügbare Parameter für Vimeo-Videos

Im folgenden Beispiel wird die Farbe des YouTube-Players geändert:

{% if product.featurot_media.media_type == "external_video" %}
  {{ product.featurot_media | external_video_url: color: "white" |  external_video_tag }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/neFK-pv2sKY?color=white&controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0">
  ...
</iframe>

Im folgenden Beispiel wird ein Vimeo-Video stummgeschaltet und in einer Schleife abgespielt:

{% if product.featurot_media.media_type == "external_video" %}
  {{ product.featurot_media | external_video_url: loop: "1", muted: "1" |  external_video_tag }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://player.vimeo.com/video/506225278?byline=0&controls=1&playsinline=1&title=0&loop=1&muted=1" title="Alt Text Here"></iframe>

image_url

Bei Verwendung mit einem Medienobjekt erzeugt der Filter image_url eine URL für das Vorschaubild des Mediums. Sie können den Filter image_url mit einem Filter image_tag verwenden, um das Vorschaubild auf einer Seite darzustellen.

Der Filter image_url erfordert entweder das Attribut width oder height. Erfahren Sie mehr über Größenparameter.

{% if product.featurot_media.media_type == "video" %}
  {{ product.featurot_media | width: 500, height: 500, format: "jpg" }}
{% endif %}

//cdn.versacommerce.de/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d.jpg?v=1560284062&width=500&height=500

Bei Verwendung mit einem Bildobjekt gibt der Filter image_url die URL des Bildes zurück. Sie können den Filter image_url mit einem Filter image_tag verwenden, um das Vorschaubild auf einer Seite darzustellen.

{% if product.featurot_media.media_type == "image" %}
  {{ product.featurot_media | image_url: width: 500, height: 500 }}
{% endif %}

https://cdn.versacommerce.de/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=500&height=500

media_tag

Erzeugt ein passendes Tag für das Medium:

{% if product.featurot_media.media_type == "model" %}
  {{ product.featurot_media | media_tag }}
{% endif %}

 <model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  
  ...

 </model-viewer>

Sie können auch die Größe des Posterbildes des Medien-Tags mit der Option image_size ändern:

{% if product.featurot_media.media_type == "model" %}
  {{ product.featurot_media | media_tag: image_size: "1024x" }}
{% endif %}

 <model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>

model_viewer_tag

Erzeugt ein Google Model Viewer Komponenten-Tag für das angegebene 3D-Modell:

{% if product.featurot_media.media_type == "model" %}
  {{ product.featurot_media | model_viewer_tag }}
{% endif %}

 <model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  
  ...

 </model-viewer>

Die Attribute der Modellbetrachterkomponente können durch Hinzufügen von Optionen zum Filter festgelegt werden. Standardmäßig ist das Attribut alt der Komponente auf den Alt-Text des Mediums, das Attribut poster der Komponente auf das Vorschaubild des Mediums und das Attribut camera-controls der Komponente aktiviert.

Im folgenden Beispiel wird eine neue Hintergrundfarbe für die Modellbetrachterkomponente festgelegt:

{% if product.featurot_media.media_type == "model" %}
  {{ product.featurot_media | model_viewer_tag: background-color: "#455A64" }}
{% endif %}

 <model-viewer background-color="#455A64" src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  
  ...

 </model-viewer>

Sie können auch die Größe des Posterbildes des Modellbetrachters mit der Option image_size ändern:

{% if product.featurot_media.media_type == "model" %}
  {{ product.featurot_media | model_viewer_tag: image_size: "1024x" }}
{% endif %}

 <model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" ar="true" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>

video_tag

Erzeugt ein Video-Tag:

{% if product.featurot_media.media_type == "video" %}
  {{ product.featurot_media | video_tag }}
{% endif %}

 <video playsinline="true" controls="">
    
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/Meister.m3u8?Expires=1560458164&KeyName=core-signing-key-1&Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
    
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
    
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
    
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4">
  <p>Sorry html5 video is not supported in this browser</p>

 </video>

Mit der Option image_size können Sie die Größe des Posterbildes des Videos ändern:

{% if product.featurot_media.media_type == "video" %}
  {{ product.featurot_media | video_tag: image_size: "1024x" }}
{% endif %}
 <video playsinline="true" poster="//cdn.versacommerce.de/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
  
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/Meister.m3u8?Expires=1561048057&KeyName=core-signing-key-1&Signature=JXwC7nPWBmTyTjI5_0i-HQCM9Ec=" type="application/x-mpegURL">
  
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/HD-720p.mp4?Expires=1561048057&KeyName=core-signing-key-1&Signature=UmSvwHVNWqsb9lX8-eOOK-3x4-g=" type="video/mp4">
  
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/SD-480p.mp4?Expires=1561048057&KeyName=core-signing-key-1&Signature=TCJ-rhKIFEwPt1lMXTIm8m-E8NE=" type="video/mp4">
  
  <img src="//cdn.versacommerce.de/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">

 </video>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.