I have a web site and I want to link a button to a video. So whenever someone clicks the "video" buttons let's say, I want to open the video.mp4 in a new browser. What I do is:
<div>...</div>
The video is quite big (190MB) so the code above is not working. I start listening to the sound but cannot see the image.
Does anyone know how to do it? Or any simple way to just open this video as a link?
You could use HTML5 tag don't forget that MP4 is only supported by IE 9+, Chrome 5+ and Safari 3+. You should at least convert your file to WebM or Ogg to make it compatible with all recent browsers.
To do so you would need a new page (where the link goes) and in this page have this code:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
/* instead of the last line you could also add the flash player*/
</video>
The browser will automatically select the first known format and play it. (source: w3Schools.com)
Hope this helps!
Related
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
I'd like to load and play a smaller HEVC-encoded video on web browsers with support for it.
I'm using this code on Safari 11 (macOS 10.13), which has support for the HEVC format.
<video muted playsinline autoplay>
<source src="clip.webm" type="video/webm; codecs=vp9">
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="clip.mp4" type="video/mp4; codecs=avc1">
<p>Video not supported</p>
</video>
In Web Inspector > Network Panel, I see that Safari loads both clip.mp4 and clip-hevc.mp4. If I inspect the video element, I see that clip.mp4 is playing, not clip-hevc.mp4. I see the same thing on iOS 11.
When I call HTMLMediaElement.canPlayType() on the types I specified, I get
maybe on video/mp4; codecs=hevc
probably on video/mp4; codecs=avc1
Nothing on variants of the HEVC codec I've seen (e.g., hvc1, hev1)
Something else I noticed: When I remove the clip.mp4 option, clip-hevc.mp4 downloads and plays just fine!
How can I make sure that only the best supported MP4 variant downloads and plays in the browser?
FYI found in iOS14 type="video/mp4; codecs=hevc" doesn't work anymore. type="video/mp4" and type="video/mp4; codecs=hvc1" does
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 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
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.