Webflow video right format

Options
veggie
veggie Member Posts: 3 ✭
edited October 2023 in Developer APIs

Hi, i added the above code but it does not work on Android on chrome, I have done some playing around but it only shows on mobile if I add WebM by itself, if I add multiple sources, the video is not shown on mobile again.

** this code does not show on mobile**

<video id='video'  playsinline autoplay muted preload='none' width="100%" height="100%">
    <source  src="https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428224/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_gidafm.mp4" type="video/mp4"/>
     <source  src="https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428231/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_u6wuus.webm" type="video/webm"/>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

**The code below plays on devices. **
 
 <video id='video'  playsinline autoplay muted preload='none' width="100%" height="100%">
   <source src="  https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428231/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_u6wuus.webm" type="video/webm"/>
    <p>Your user agent does not support the HTML5 Video element.</p>
 </video>

How can we set the code to play different versions depending on the device, it seems like Chrome needs webm to play on the devices.

Thanks

Tagged:

Answers

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 99
    Options

    Hey @veggie. Thanks for posting here. I see you raised a ticket about this in our support center, which I have just replied to, but I wanted to post my response here for others to see in case it helps someone in the future.

    I put your example code into jsfiddle and tried on my Android device (Pixel 6 Pro) and can confirm that both snippets are showing in Chrome v96.0.4664.104 - https://jsfiddle.net/dannyv_cloudinary/4rzLaegn/show

    In the first example I am shown an mp4, and in the second, a webm. If I change the order of the sources in the first snippet I see a webm in Chrome - https://jsfiddle.net/dannyv_cloudinary/4rzLaegn/2/show

    One thing you could do to make sure your videos are displayed no matter what device is used to view it, is to use f_auto in your transformation. With this, we determine the best file format to deliver depending on the user's device and browser. I've put an example together for you in https://jsfiddle.net/dannyv_cloudinary/4rzLaegn/4/

    All the best

    -Danny

Categories