Referencing this article: https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif
What is the compatibility situation with videos in img in 2020? I don't know what the name of the feature is called to look for in caniuse.
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in tags display 20x faster and decode 7x faster than the GIF equivalent - in addition
to being 1/14th the file size!
Now we wait for the other browsers to catch-up
By today (Oct 2022), we still can only use <img src=".mp4"> on Safari.
If you want to make MP4 files work like GIFs on other browsers, you might wanna use <video autoplay muted loop>.
Related
I'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
I've been attempting to find a method for playing video inline in mobile safari for awhile now.
I know this is possible and has been achieved (see link)-
http://www.raptmedia.com/project/philips-designed-play-drives-mobile-video-engagement
However, I am unable to determine how this is done. I've tried manipulating iframes but this alone doesn't seem to have any impact.
I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile:
<div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="600px" height="600px">
<source src="video.mp4" type='video/mp4'/> <source src="video.webm" type='video/webm'/>
<source src="video.ogg" type='video/ogg'/> <track kind="captions" srclang="en" label="English" />
</video> <script> var myPlayer = _V_("vid01"); ` </script>` </div>
I know this is an old question, but it ranks high in my Google search and I can at least answer the question posed above, so I'll add this in case other people come across it: why does it work on that particular page?
I looked at it, and it doesn't really play inline video. On my iPhone, it preloads a ton of JPG frames and then "plays" them like a movie, while playing an mp3 audio track behind it. So they are just faking it, basically. Still not able to play the video inline on the phone.
The only solution I know is based on the drawImage function of the canvas tag... I spotted the basics here on SO but there's some fun left for the reader :D, in a few words, You hide and play the video and at the right freq You render the current frame into a canvas, some attention is needed for the audio sync. It works better than expected.
Here is a basic sample, and here another one where I try to apply some webkit based filters.
Hope it helps, have fun!
You can use something like this library to make it work: https://github.com/bfred-it/iphone-inline-video
It basically uses an audio tag to drive the video by seeking to the current time, so you can have the frames updated without having to play the video.
The good news is that iOS 10 will support this, so no more hacks are going to be needed: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12
I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.
The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline#L1.3)
Here is the HTML source:
<video controls class="img-responsive">
<source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
<source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>
Someone has had the same issue?
There are a couple of things you need to fix/take into account:
your videos play well in Chrome but IE displays an error message and firefox just won't read them.
your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here
Suggestions to fix it:
use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.
Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).
You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.
I'd like to include an entire HTML5 video in one spot and then a portion of the same video lower on the same page. This abbreviated syntax works for the portion of the video from 1:01 to 3:51.
<video>
<source src="foo.mp4#t=61,231" type="video/mp4" width="640" height="360"/>
</video>
But the first video shows up normally and the second, shorter video with the same source doesn't seem to get loaded and appears as a small, black video player. But loading the second, shorter video in a second page works normally.
Is is possible to load the full video and then a portion later on the same page?
Thanks.
This works fine in Linux Firefox 22.0 but has the above-described problems in Linux Chromium 28.0
Ok, I have the same problem, however I am not even trying to start one video at a different time. I am just trying to include two of the same big movie twice on a page. One loads, or the other, but not both. I tried copying the movie and naming it movie2 and include that in the code. That works. Its ugly, so I tried to instead make a symlink rather than copying the movie. This does work:
ln -s movie.mp4 movie2.mp4
So as long as you have your code with two different names, they both load. But on the server side its just one file and a symlink. This is a workaround, so I would like to find out if there is a bug or something. My Chrome is 28.0.1500.95
I guess adding query string - for example ?1 - at the end of the second video src will force browser to download the file again in Chrome
src="foo.mp4?1"
I've used this code
<iframe width="640" height="480" src="http://www.youtube.com/embed/....?rel=0" frameborder="0" allowfullscreen></iframe>
to embed a youtube video.
I would like to automatically set the quality to the max available (which in my case is apparently 480); what happens is:
1) Firefox 12.0: the starting quality is never 480, sometime 360 sometime 240 (yes it changes from time to time)
2) Safari 5.1.4: there is just one option, 360. Why?
I read Youtube - How to force 480p video quality in embed link / <iframe> but even if I increase the frame size nothing changes. The javascript method also seems to be not reliable.
Thanks.
Try adding “&ap=%2526fmt%3D18″ and “&ap=%2526fmt%3D22″ to the embed url. I believe D22 is 1280 and D18 is 460?
The syntax is apparently not the same for embedded as it is for the browser's regular url (which is what is given in the answer in your link)
EDIT:
Found the codec information; put the FMT value after the D (ex D18 D22)
http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs