Search code examples
vue.jshtml5-videonetlify

HTML5 video tag in vue.js

I have the strangest problem in a vue-setup.

This markup works perfectly for one page - on all devices and all tested browsers:

<video 
    width="960px" 
    height="540px" 
    controls autoplay muted loop preload="auto" 
    playsinline
    >
    <source src="@/assets/video/studio_sor_v1.mp4" type="video/mp4">
    Your browser does not support the video tag. 
</video>

But this markup works only on desktop and Android for mobile. Both Chrome and Safari fails to play it on iOS mobiles:

<video 
    width="960px" 
    height="540px" 
    controls autoplay muted loop preload="auto" 
    playsinline
    >
    <source src="@/assets/video/studio_nord_high_sml.mp4" type="video/mp4">            
    Your browser does not support the video tag.
</video>

Different video's, but encoded with the same encoder, same settings, same file size etc.

Some dude tried to upload the non-playing file to his site (some Vix site) - and it works there. Vue.js or server (netlify) problem?

Makes no sense to me. Any ideas?

Solution

  • I'm betting this is a codec issue. what is the codec of the non-playing video? First is probably h264 (nearly universal support) Im guessing the second is VP8 or VP9 in an mp4 container. iOS mobiles (no matter the browser) do not support these codecs.

    You can check this with FFprobe Here's API for ffprobe: https://www.streamclarity.com/probe?url={videoURL}