I've got some stupid problem... Simple code:
<div id="start">
<video width="320" height="240" controls>
<source src="Content/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
on my project is not working. The video isn't displying, the path is correct... Div start has no special styling and for video is just set width and height as above.
When i checked example on http://www.w3schools.com/ everything works, when i check my browsers support for video it's all ok. And more funnier thing, that when i download the video than its downloading my proper video....
Ok, after some testing I can see your video on Mozilla Firefox but your video won't run in Google Chrome nor Internet Explorer. The situation you are facing is based on file formats. Each web browser will require a certain file format for your video, thus you will need to encode your video in several formats in order to make the video available for a wider range of visitors, depending on their browser.
The Wikipedia explains which file formats will better fit the needs of each web browser in the Browser support Section of the HTML5 video tag.
The proper application of the <video> tag in your code would look like this:
<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>
Considering that you should supply individual video files for each instance of the sources inside the <video> tag.
Remember that your fallback content can also be an image, animated gif, a flash animation or even a youtube code (properly formatted) which will result in something being shown to the user if nothing works. Don't forget to include the measurements: fixed width and height in order to the fallback media fill the whole space where the video should show.
For your transcoding procedure, I suggest you to have a look at This answer in the AskUbuntu site where I explain how to compress your files with ease by using the Mobile Media Converter by Miksoft software.
I hope this help you but if you need further assistance don't hesitate to drop a comment.
Good luck!
Related
Download and Picture-in-Picture options not showing when click vertical ... at right bottom of video. Does anyone have solutions.
<div style='transform:translate(0px,0px)'>
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
Look like this is a bug in chromium, which has been reported nearly a year. It can be reproduced when you have enough window height.
If you don't want to wait until a patch releases, you can implement your own control elements using Picture in Picture API.
Btw, since this bug is related to window height, a hacky workaround would be embedding the HTML content into an iframe element (using srcdoc), but I would not recommend doing it in production.
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 thinking about the fact that the higher the MP4 profile we go, the better the video quality gets...
This brings me to a question I thought I'd ask the experts!
Can a HTML 5 video tag have multiple MP4 sources with different codecs? Something like:
<video>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="high.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' />
<source src="main.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
<source src="baseline.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"' />
</video>
The first MP4 video being a high profile video, the second main profile, and the third baseline profile.
On an iPhone 3G, will the baseline one be played?
On an iPhone 4S, will the high one be played instead?
A follow up question: if the high profile video is below the baseline profile video in the source list, which one will play on an iPhone 4G?
(Thanks for reading and especially if you reply. :)
According to Mozilla, <video> can contain an arbitrary number of <source> tags. Also, the first source tag with a compatible video file for the current device/browser should be played.
Apple themselves confirm that the <source> tags should be in the developer's preferred fall-through order, from which I'd assume that Mobile Safari, too, will pick the first file it can play.
So, from what I was able to dig up, there is no static way of preferring a particular file for a particular browser/device combination. You'd probably have to do some detection based on the provided User Agent string and only supply the proper files (but that's not possible with plain HTML).
You can provide several source tags and the user agent should play the first one it can handle.
See W3C definition: http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element
There also a javascript example for fallbacks is presented.
http://www.w3.org/TR/html5/embedded-content-0.html#mime-types shows some javascript how you can test if a browser can play a specific codec.
Multiple source files can be specified using the element in order to provide video or audio encoded in different formats for different browsers. For instance:
<video controls>
<source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
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.
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.