This happens because your mp4 likely has a blank first frame and no poster image set. Two quick fixes:
Add a poster image to the video tag in your theme code:
<video poster="{{ 'your-thumbnail.jpg' | asset_url }}" muted loop playsinline>
<source src="{{ section.settings.video_url }}" type="video/mp4">
</video>
Or re-encode your video so the first visible frame appears at the very start. Handbrake works well for this.
try using this code
{%- if media.media_type == ‘video’ -%}
{%- assign preview_image = media.preview_image -%}
<video
class=“product-video”
playsinline
muted
preload=“metadata”
{% if preview_image != blank %}
poster=“{{ preview_image | image_url: width: 1200 }}”
{% endif %}
{% for source in media.sources %}
<source src="{{ source.url }}" type="{{ source.mime_type }}">
{% endfor %}
</video>
{%- endif -%}
and still issue is there then add this JavaScript
document.querySelectorAll(‘video’).forEach((video) => {
// Skip if poster already exists
if (video.getAttribute(‘poster’)) return;
video.addEventListener(‘loadeddata’, function () {
// Move to 3rd second
video.currentTime = 3;
video.addEventListener('seeked', function captureFrame() {
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageURL = canvas.toDataURL('image/jpeg');
video.setAttribute('poster', imageURL);
// reset back
video.currentTime = 0;
video.removeEventListener('seeked', captureFrame);
}, { once: true });
});
});