Having a real issue with displaying video in Chrome and Safari. The video seems to only run after a few page refreshes. Not sure why this is. I think it has something to do with the way Chrome and Safari render video.
In Firefox I have no issues with the video running.
Here is the HTML
<video width="100%" height="100%" preload="auto" loop autoplay style="visibility: visible; width:
1321px; height: 744px; opacity: 1;">
<source src="https://d-
360.nyc3.digitaloceanspaces.com/2018/06/video_2.mp4" type="video/mp4">
</video>
I noticed that it was pretty slow to download, so my guess will be that it's a server performance/caching issue.
You can address some of that by using something like ffmpeg re-encoding with the MOOV atom at the front of the video (will allow it to start playing back sooner) eg:
ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4
if performance is still poor, then you might want to constrain the bitrate further to help address download speed (current video is around 2.5Mbps) eg:
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
(this forces a transcode of the video using a high quality present but constrains bitrate to 1.5Mbps ... you may need to experiment with this value to get a good quality vs performance trade-off)
Depending on the desired output side, if you don't need the full 720p framesize, you can add an additional constrain on the transcode to limit that eg:
ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4
You should also ensure that your server is configured to allow caching of content so if the video is being replayed it doesn't always have to come back to your server
Really good answer by Offbeatmammal concerning compression. The video did need to be compressed.
I compressed with ffmpeg using the following command.
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
Uploaded the video but still no luck in chrome and safari video hanging on first frame. So it was not a size issue.
Added Muted Attribute - Solution
I took the video markup and ran it outside of my site in a codepen on chrome and the issue was replicated. After looking closely at the attributes I noticed I did not have the muted="" attribute added in the video markup.
Open code pen and look at first video. No muted attribute. .
Once I applied the mute attribute muted="" the video played in chrome and safari.Open code pen and look at second video. Muted attribute added .
<video width="100%" height="100%" preload="auto" loop="" autoplay="" muted="".
IMPORTAINT
This is only a issue with chrome and safari. In firefox the video will play. So if you are going to add html5 video to your site make sure you include the muted="" attribute.
Related
I am trying to add a web video that has alpha transparency to a website. The video is in .WebM format so no problem there. When checking it out on safari with the latest iOS I realized that Apple doesn't support WebM. After researching it a bit I keep running into dead ends.
I tried converting it into an HEVC encoded video but it still doesn't work. I tried re-exporting the video file from Premier with the format Apple ProRes 4444 XQ .mov and that didn't work either.
My code is just standard HTML5, with the second 2 video sources being both that I tried and could not get to work on Safari.
<video width="600" autoplay loop muted playsinline>
<source src="movie.webm" type="video/webm">
<source src="movie_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
<source src="movie_ProRes4444xq.mov" type="video/quicktime">
</video>
This CSS Tricks article shows a great example of what I am trying to accomplish. It even has a great guide on how to accomplish this task. However, one of the main steps on the guide requires a Mac for it's video encoding ability. I am on Windows. Is there a workaround or any other ways of achieving this?
Thanks,
Chase
This CSS Tricks article shows a great example of what I am trying to accomplish.
I am on Windows too so I cannot confirm a working Answer, but try...
(1) Test by using only one source for iOS (it must be either MOV or MP4) with "hevc" as the codec.
<video width="600" autoplay loop muted playsinline>
<source src="movie_HEVC.mov" type='video/quicktime; codecs="hevc"'>
</video>
(2) On Windows, try using FFmpeg to encode Pro-Res 444 video.
ffmpeg -i inputfile.mp4 -c:v prores_ks -profile:v 3 -qscale:v N -vendor apl0 -pix_fmt yuv422p10le -s 800x600 -r 30 output.mov
I am having a bit of trouble implementing a video into my site.
I use this block of code:
<video id="video-background" poster="/video/video-poster.jpg" autoplay loop muted playsinline>
<source src="/video/video.webm" type="video/webm">
<source src="/video/video.mp4" type="video/mp4">
<source src="/video/video.ogg" type="video/ogv">
</video>
When opened in any browser other than Safari the video loads instantly. I haven't seen it take longer than 5 seconds before it is playing.
When opened in Safari the video takes close to a minute to begin playing (might even be longer).
Can anyone add some reason to this madness so I can:
1) Improve performance on Safari...
2) Get a good excuse to my manager...
I have checked all the video declarations - they are all are working videos.
I have tried moving the order that the videos are declared.
Thanks, Jason.
My assumption would be that the video has default encoding - usually with an mp4 video the final step is to write the MOOV atom that contains the metadata and information about the frame locations etc at the end. This means until the file has been completely read the browser doesn't have all the information available to it.
You can fix this using FFMPEG (open source, free, downloads available for most platforms) and doing a second pass on the video to move the MOOV atom to the front:
./ffmpeg -y -i source.mp4 -movflags faststart dest.mp4
There could be a problem with video encoder. Just run this program to re-encode your video.
Link
Hope this helps.
There is an interesting thing happening! When I try to play a video like :
<div class='vcontainer' id='vc'>
<video id="match" width="700" controls>
<source src='tsk1.mp4' type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
I could only hear it and there is no video. It has a frame height of 576 and frame width of 720. But I am able to play another video (normally), with a frame height of 320 and frame width of 568. What could be the reason for this?
Note:For reference I have also uploaded the video file that is causing an issue
Your video is probably in unsupported codec as said in the comment.
By saying codec, it's not the container format (mp4).
A container format is a format that combines several tracks (audio or video) along with some extra information (such as metadata) into one file or stream.
Currently most browsers support videos with mp4 format using baseline H.264 as image codec and arc/mp3 as audio codec.
Check if your video codec is H.264. Your browser can play sound proves that you got the right codec for audio, but maybe you're using some unsupported video codec.
Even if your video is H.264, you may still encounter problems. AFAIK, Chrome supports only yuv420p pixel format, while safari can also support yuvj420p. The version of H.264 may also cause problem, use baseline will be a good choice.
Your only way to make the video work is to transcode it to browser compatible format (Most video hosting websites will do this for you). You can do this with FFmpeg using the command below.
ffmpeg -i <Your video path here> -c:v libx264 -c:a aac -strict -2 -pix_format yuv420p -profile:v baseline -preset:v fast <Output video path here>
In html 5, I want to embed an mp4 like this:
<video width="640" height="480" controls>
<source src="somefile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The video runs fine the the browser in my development machine, but the file is 500MB because it was recorded in full HD. How do I down-sample the file so that it is about 50MB, with smaller video but the same sound quality, and still able to play in the browser using the html5 video tag shown above?
I am using Windows. I have been using FlashIntegro, but it converts the files to avi format, which cannot be viewed using the video tags in html 5. I want an mp4 format I can publish using the video tags in html 5. I would like to use free software.
I do not want to use flash or adobe creative cloud, but I am adding those tags to find viewers who might know about free alternatives.
I would suggest something like FFmpeg, though would set expectations on quality if you go from a 500MB file to a 50MB one - though a lot will depend on the amount of optimization already present in the source... I was able to get a 270Mb file down to 29Mb without visible loss of quality using the following:
./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags fast start DestFile.mp4
The above will give you a 1280x720 output, at 3Mbps using h264 in an mp4 container, and will also do a second pass to move the moov element to the front of the file enabling it to start streaming faster. It will not re-encode the audio so will keep whatever quality you started with
You may want to play around with the frame size and the bitrate to get the filesize to match what you like/need
we're planning to use a fullscreen html5 video on a website. I've read that MPEG-4/H.264 might be the best format at the moment.
I have the video file available as 1080p mp4 … it's 41.2mb in size. Since the video should play in "relative" good quality and stream really fast, how can i optimize the video file.
Any tips, tricks for me? is 1080p needed for a fullscreen video on desktop or is 720p enough?
What should the output size of a fullscreen video for desktop be?
Regards,
matt
a lot will depend on the intended audience and their connectivity. If they've got good connections and a big monitor they may be able to appreciate 1080p, but 720p is probably going to be okay.
It's better to err on the side of reducing quality vs risking buffering IMO (though that will depend on the use-case obviously). My usual approach would be to work with some target users and A:B test some different quality settings (adjusting both framesize and bitrate, clearing their cache each time) to see where the sweet spot is...
Make sure the MOOV atom is at the start so they don't have to wait for the whole thing to load before it starts to play.
You can create some sample versions of your content fairly quickly using ffmpeg to transcode/transmux with various settings
ffmpeg -y -i {source-file} -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart {target-file}
-s defines the target output size
-b defines the target bitrate
movflags faststart will run a second pass to ensure the moov atom is where you want it
Also, depending on your mobile target you may be better off with a fragmented MPEG format that allows for adaptive bitrates (eg HLS) so the browser can decide which bitrate/framesize it can best display for the request
I've been spending a lot of time with HTML5 video lately and just came across this thread-- Miro is a nice, simple (and free) option that can output in the major formats, i.e. mp4, webm & ogg theora.
720p would be enough, especially if you can add a semi-transparent film over the top to hide any artifacts. You really don't want it to be slow and jerky.
Format wise you can use as many as you like in the <video> tag (for whatever browsers you need to support). E.g.
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
You can even add a flash fallback. Anything inside the video tag other than <source> attributes is ignored by browsers that support html5 video. Therefore:
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
<!-- Flash fallback -->
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
I work with HTML5 video a fair bit and built a free (for under 20MB files) converter that takes any video file and outputs webm, ogg and mp4 files along with your <video> tag: http://html5backgroundvideos.com/converter/