for some reason my website doesn't want to play mp4 videos, giving the error: "non-supported video type or invalid file path" (or something symilar like that, translating form dutch). but when I try to watch the same video in this jsfiddle, it works fine, is there something I'm missing in my video player?
<video controls autoplay class="fullsize hide" id='videoThing'>
<source type="video/mp4" src="videos/Reduce Co2 Of Transport-24.mp4">
</video>
Related
I want to upload a particular video in html, but I've been struggling to make it work. So, hope to get help on this.
First, I found out about ffmpeg and converted .mov video file to .mp4 via Terminal. The converted video (MPEG-4 movie) opens well on my mac, so I know it converted just fine. But when I try to open it in HTML, it's basically invisible.
Video hidden - audio works though
<div class="content-videos">
<video width="600" height="450" controls>
<source src="bysong_cgh.mp4" type="video/quicktime">
<source src="bysong_cgh.ogg" type="video/ogg">
<source src="bysong_cgh.ogv" type="video/ogv">
<source src="bysong_cgh.webm" type="video/webm">
</video>
</div>
I know it just stays hidden because if I change the type from "video/mp4" to "video/quicktime", I get the black video box. But in this case, the control and audio don't work.
Video visible but still not working
Not really sure what the problem is with mov videos because the original mp4 videos work fine. It's only the converted mov videos that give me trouble. Hopefully, I find an answer to this. Thank you.
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
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'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.
My HTML5 video player won't play a file longer than one hour. Here is my code:
<video src="/Movies/MP4/Blaa.mp4" controls="controls"></video>.
I am quite new to HTML5 so i am asking what the problem could be? Any answers are appreciated.
-Simon
It looks like you're only using a single mp4 file, so I'm not sure if this will help, but I was able to solve my problem by switching the order of my source files. From what I can tell, Chrome is able to play H.264 video (which is what is usually contained within the MP4 wrapper), but it is unable to play MP4 files. I'm guessing that they finally removed support for MP4 like they've been saying that they were going to.
Here's what my code used to look like:
<video width="640" height="360" controls>
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
From my understanding, when a browser tries to render an HTML5 video tag, it's supposed to skip over any source tags that it can't play, and attempt to play the first one that it can. For whatever reason, Chrome is not currently doing that. It's trying to play the MP4 anyway, and failing.
Even the video on the "Video for Everyone" page is failing for me now.
My solution was to switch the order of the source tags so that the webm video came before the mp4 video:
<video width="640" height="360" controls>
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
So far this has fixed the problem. Chrome now plays the webm file with no issues, and all other browsers I have tested still seem to work fine.
The only possible problem that I still need to test for is that I've read that the iPad had a bug that required the MP4 source to be listed first. I'm working on getting my hands on an iPad to see if that's still an issue.
For now, this solution fixed my problem.
Hope that helps!
The problem was that chrome won't play MP4 movie files at the moment. Safari is the only working browser right now.