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

weknowjackAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gheistCommented:
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)
David Johnson, CD, MVPOwnerCommented:
sounds like you did a fade-in for the audio
weknowjackAuthor Commented:
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?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

David Johnson, CD, MVPOwnerCommented:
weknowjackAuthor Commented:
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
David Johnson, CD, MVPOwnerCommented:
Your audio clip was way too short.
Low Quality
High Quality
weknowjackAuthor Commented:
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
David Johnson, CD, MVPOwnerCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
weknowjackAuthor Commented:
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.
weknowjackAuthor Commented:
Well, I'm wrong. It played once correctly. Now it is not. :(
weknowjackAuthor Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.