I am trying to find a way to create multiple poster images (depending on the resolution of the device) for my HTML5 video tags. I already found out HTML5 Video does not support multiple Image Sets.
Here is my current code:
<video poster="<?= $project->poster()->toFile()->url() ?>" preload="none">
<source src="<?= $project->html5()->toFile()->url() ?>" type="video/mp4" />
</video>
And here an example which is use for standard images - which works fine:
<picture>
<source media="(min-width: 64em)" sizes="50vw"
srcset="<?php echo $image->focusCrop(1200, 1200*$var1, 70)->url() ?> 1200w,
<?php echo $image->focusCrop(1000, 1000*$var1, 70)->url() ?> 1000w,
<?php echo $image->focusCrop(800, 800*$var1, 70)->url() ?> 800w,
<?php echo $image->focusCrop(600, 600*$var1, 70)->url() ?> 600w,
<?php echo $image->focusCrop(400, 400*$var1, 70)->url() ?> 400w,
<?php echo $image->focusCrop(200, 200*$var1, 70)->url() ?> 200w">
<img src="<?php echo $image->focusCrop(600, 600*$var1, 70)->url() ?>" alt="Photo">
</picture>
Anyone knows a way how to combine those two?
Thanks for any help!