Webflow video right format
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
Answers
-
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
0
