I'm having trouble with a video I'm using as a background -- it works correctly on firefox & chrome, however on Safari on load and when it loops, it flashes black for a moment.
Because it's looping the trick of having it fade in after won't work. I'm not really sure what's causing the issue. It's using a poster which loads correctly. the file is about 1.1mb.
Any ideas or solutions?
<video id="HeroVideo2" class="width100" loop="true" autoplay="true" preload="none" poster="/assets/videoposter.jpg">
<source src="/assets/hero.mp4" type="video/mp4">
<source src="/assets/hero.webm" type="video/webm">
<source src="/assets/her.ogv" type="video/ogg">
</video>
I have found that the issue was related to encoding in Handbrake.
I reencoded the video and made sure to check the "Web optimised" option and the new video no longer has the one or two back frames when viewed in Safari.
Related
I have a webpage that includes a video within it. However, even though all of the file types (.mp4, .ogg, .avi) are supported in chrome, the video will not show.
I've already tried adding "preload="Metadata"" as described in a similar post, but it just loaded the thumbnail. once. I have also used Chrome's [inspect element] and my coding software's error finder, none of them have found any relevant errors.
<video width="256px" preload="auto" controls preload="metadata">
<source src="Audio_Video/Video.mp4" type="video/mp4"
preload="metadata">
<source src="Audio_Video/Video.ogg" type="video/ogg"
preload="metadata">
<source src="Audio_Video/Video.avi" type="video/avi"
preload="metadata">
</video>
I expect the video to load and play as it does on other browsers, but it in fact does not. All that appears is this: A broken video that will not load
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?
Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.
Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.
Build an HTML5 video as usual:
<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
<source src="aurora.webm" type="video/webm"> </source>
<source src="aurora.mp4" type="video/mp4"> </source>
</video>
If previous advise does not help, try to use scripted playback examples video.js and simpl on Github.
Also, read this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos.
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
...Update: It seems there's an issue with playing Webm files with iOS
Chrome.
The simplest and best fix is to make sure you declare the mp4 file first and then declare webm in second place (the reverse of your shown order). I believe iOS expects an mp4 as first file in HTML5 video tags. All iOS sees is src="sample.webm" which is not a valid expected MPEG codec so leads to your "...play button that doesn't trigger anything". You got a silent error somewhere.
Try :
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/mp4" src="sample.mp4"></source>
<source type="video/webm" src="sample.webm"></source>
</video>
Side note: Just my opinion but, I think having webm here is redundant since the main supporting system (Google-based tech) can already handle mp4 anyways.
Better to offer those video decoders in browsers [of end-users] a choice of mp4 or ogv (just in case of Firefox).
PS: Auto-play is disabled on most mobile systems due to SIM data allowances. The end-user must choose to play that video. Likely there are clever workarounds on the net, just remember though, this is expected behaviour so is not an issue with your current code.
I have a website where I am trying to show a video.I have 2 mp4 format videos and both are ok(not corrupted).When I try to show these two using tag in html5 one is working but another is not working.
I have used the code given below
<video width="320" height="240" controls>
<source src="video/v1.mp4" type="video/mp4">
<source src="video/v1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls>
<source src="video/theme.mp4" type="video/mp4">
<source src="video/theme.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
here,in firefox first one is working great but the next one shows the error "No video with supported format and mime type found".In chrome first one is ok and second one only shows audio.
Please help me to solve this.
Thanks in advance.
Check to see if video/theme.mp4 is accessible in the browser. View source and try clicking the link or see if it is loaded in the resources in the development tools. It sounds like Firefox can't find/read theme.mp4 or theme.ogg so is displaying the error message. Chrome can't find theme.mp4 either but is reading it's MIME Type it as audio/ogg rather than video/ogg.
You could try this page and see if it helps, the MDN always has useful stuff:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls
I am using jquery mobile and video tag to display videos.
My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.
I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it shouldn't be encoding issue.
When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.
What's causing the problem?
Thank you in advance!
<video width="75%" id="video1" controls="true" autoplay="true">
<source src="videos/mov_bbb.mp4" type="video/mp4">
<source src="videos/mov_bbb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I tried the sample below in iphone simulator and it is working ,check it out .
<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
it shows preview image of the video,when you click on it plays in fullscreen.