chrome-specific video thumbnail issue
Greetings!
My Heroku app includes videos in two ways:
- displayed on a video detail page: an iframe using the cloudinary player- works great in all browsers
- shown as a thumbnail on an index page- this works in safari (little thumbnail that shows the video playing), but shows as a 'broken image' in chrome
<a href="/familytree/videos/28/"><img src="https://res.cloudinary.com/hnyiprajv/video/upload/h_100,r_20/1950ish_Bensons_animal_farm_nh.mp4"></a>
What's the correct way for showing a small version of a video (without an iframe) that works in chrome?
Thanks in advance for your ideas/help!
-
Hi Diane,
The reason the videos were playing fine on Safari is that since Safari 11.1 (and in Safari Technology Preview prior to that) it supports having videos in the
imgtag. You can read more about this here.The issue you were facing is that only Safari supports this. For support on other browsers you will need to use the HTML5
<video>tag, as follow:<a> <video controls src="https://res.cloudinary.com/hnyiprajv/video/upload/h_100,r_20/1950ish_Bensons_animal_farm_nh.mp4"> </a>
Best,
Wissam
1 -
Oh great- I'll have a look and give this a try- thank you!!
0 -
Yep that was it- thanks so much!!
0
Post is closed for comments.
Comments
3 comments