Link to home
Start Free TrialLog in
Avatar of Jack Andrews
Jack AndrewsFlag for United States of America

asked on

Audio is delayed about 1 sec in html5 video

I have an html5 self-hosted video here: http://zoomapartmentfinder.com
The audio plays in sync on my desktop editor, but has about a one second delay online. It is supposed to start with the video start.

<div style="width: 418px; height: 392px; margin-left: 100px;">
	<video autoplay controls height="315" poster="sites/default/files/zoom-poster.png" preload="" width="auto">
		<source src="sites/default/files/video/Zoom-Video-Final-418w.mp4" type="video/mp4"></source></video>
</div>

Open in new window

Avatar of gheist
gheist
Flag of Belgium image

It has very high bandwidth for resolution (1Mbps -> i.e like 720p video) like created with iMovie or other Apple, not Adobe tool?
Use trivial tools like handbrake to chop it to something resonable (like 10x smaller)
Avatar of David Johnson, CD
sounds like you did a fade-in for the audio
Avatar of Jack Andrews

ASKER

No fade in on the audio. I created the video with Photoshop and output it at medium resolution at 30fps. So, that fact that the video starts ok, but the audio lags indicates a bandwidth problem?
Thank you. Your file does show the audio and video starting at the same time, but the audio doesn't start at its beginning. For some reason my video is clipping off or skipping the beginning of the audio. Here's the audio track standalone: http://zoomapartmentfinder.com/audio.html
Your audio clip was way too short.
Low Quality
High Quality
Sorry but I'm not following. The audio clip at the link above is over 50 secs long. It is repeated 1.5 times to the end of the video.

However, there are two clips in the video. One is the music clip, the other is the zooming car sound. I only provided a link to the music clip, which is the first to play. The music clip is the problem. I opened the audio track in Audacity AFTER it was rendered to the video and the first sec or so of the music audio clip is not there, meaning it is a dead area on the audio track. In other words, in lay terms, the "space" where the front end of the music should be on the track after the video is rendered, is there, but there is nothing there to play.
Screen-Shot-2015-06-28-at-5.24.04-PM.png
What are you using for your video editor? You could get a trial of Camtasia Studio..  http://www.techsmith.com since I don't have the zoom sound track and I didn't know that the audio track was repeated 3 times. http://www.screencast.com/t/TEaT2b6I is what I've done so far. if you were to make the complete sound track available it would help or just the zoom track and tell me exactly where you want it I can do it for you.
ASKER CERTIFIED SOLUTION
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks but I get php errors trying to download your files. I did watch your explanation video. Again, the problem has been that the front end of the music clip is blank after the video is rendered from Photoshop. There is a blast of horns at the beginning that you don't hear in the one we were working on.  I took a larger pixel dimension of the same video that does play correctly, resized it to 418px X 235px, and uploaded it here: http://zoomapartmentfinder.com now.

The live one now plays correctly. I could have done that originally, but my goal was to find out why Photoshop was removing the audio from the first second or so. My process was to open the psd file of the video, make the dimension adjustments from 700px width to 418px width and render the video at the smaller dimension to fit the page area. But when Photoshop renders the smaller dimension video from the Photoshop file I was using, it removes the audio in the first second. For some reason, the larger version which is 700px wide did not do that. So I just now opened the larger video in Photoshop, resized it and re-rendered the smaller video. For some reason it has complete audio. I think it would take someone more familiar with rendering video from Photoshop to figure this out.

This is a simple video and I don't want to have to learn a new app to do this. I don't do much video and Photoshop has some powerful tools to do simple stuff. It's just that for some reason this one wasn't working out and I was trying to figure out why.

I still don't have a solution for the Photoshop process problem going forward, but my video is right currently.
Well, I'm wrong. It played once correctly. Now it is not. :(
Ok. It does play correctly in Chrome, Safari, FF Win and IE 11. Not working in FF Mac, so I guess that tells us at least for now the video itself is ok, but Firefox Mac is having a problem with it.