Video tags play audio but not video
If you look at my webpage , you can see that the top video (medieval guy with a red nose) plays great, both video and audio.
But if you look at the bottom (second) video, when you play it, there is only audio. The "video" you see is not actually the video itself, but a png using the "poster" html tag.
Here is the html for both videos:
<video src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" poster="http://shapeshed.com/examples/HTML5-video-element/images/posters/les.jpg" controls="true" width="320" height="240">
Your browser doesn't support the video tag. You can <a href="/video/your_video.ogg">download the video here.</a>
</video>
<video src="videos/Play.mov" poster="videos/Play.png" controls="true" width="800" height="600">
Your browser doesn't support the video tag. You can <a href="videos/Play.mov">download the video here.</a>
</video>
The second video is what I care about, but I can't seem to get the video to work in Chrome - it only plays audio. But on Mac Safari the video works fine. Am I doing something wrong? I seem to be implementing my second video in the first video. Why 1 work and 2 not?
EDIT: I got further promotion, but now only on iPad (Chrome works, iphone works). I get video but no audio. Any ideas?
EDIT # 2: I need my 2 videos to play correctly in Apple Safari - nothing else matters, because all users except Apple devices will see Youtube enabled videos. Can anyone tell me the exact steps to convert AVI to video format guaranteed to work in Apple Safari?
source to share
You might want to try something like this:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
More help here html5 video
source to share
Your video is encoded with MPEG-4 Part 2 and AAC audio. MPEG-4 Part 2 video is not supported by Google Chrome . Unless you manually install additional codecs, the only video codec supported by both Safari and Chrome is H.264 (also known as MPEG-4 Part 10, or MPEG-4 AVC). If you are re-encoding as H.264 it should be put in an MP4 container with AAC audio and file extension .mp4
(not .mov
).
source to share
Web video is complex, most browsers support different video formats (codecs). To be compatible with all browsers, you need each video in three different formats: MP4, OGG, WEBM.
For maximum compatibility, what your video workflow looks like:
- Make one version using WebM (VP8 + Vorbis).
- Make another version that uses basic H.264 video and low complexity AAC audio in an MP4 container.
- Make another version that uses Theora video and Vorbis audio in an Ogg container.
- Link to all three video files from one item and return to the Flash video player.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
source to share