I tried this code but video is just continuing to load, not to playing.
I also tried video codec H-264 but that is not working.
Next I tried to convert mp4 video to webm but that did not help either
Can anyone tell me how to do this using jquery and ajax?
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Did you checked by drag and drop to open the movie.mp4 or the movie.ogg file?
If the file does not work by simply opening it using a browser, it might be the file's problem, not the code or the browser.
For the file type support per browsers please refer the "Can I use?" pages:
MPEG-4/H.264
Ogg/Theora
Related
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.
First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>
I am trying to display a video on a webpage.
I tested it locally and it works fine. However, when I put it in my webpage's repository (on a different computer) and access it through the internet, the video does not appear.
I included an mp4 and an ogg as source files, and tested it on both Firefox and Chrome, but neither work. I am sure the video path is correct.
Any thoughts?
<video width="205", controls>
<source src="movies/video1.mp4" type="video/mp4">
<source src="movies/video1.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Solved!
Videos did not have read access.
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'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.