I have webpage that needs to display video but i will have two files
1) .ogg file with Theora Codec
2) .mp4 file with MPEG4 Codec
I have written below HTML but it did not worked as i expected in IE and Microsoft Edge.
Guys please figure out where i went wrong ?
<video id="my-video">
<source src="video/Videoogg.ogg" type="video/ogg">
<object type="video/mpeg" data="video/video.mp4" width="320" height="240">
</video>
Related
I have looked everywhere online to try and solve this issue.
I have got the following code on my website which works fine on all browsers apart from Microsoft Edge, it simply says that the content is not supported, so it is recognising the video tag.
I'm displaying an MP4 video, codec: H.264, AAC
<video width="100%" controls id="slider-video">
<!-- <source src="img-src/{v2_FOLDER}/theme/GMS_Final.webm" type="video/webm"> -->
<source src="img-src/{v2_FOLDER}/theme/GMS_Final.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<p>Your browser does not support the video tag.</p>
</video>
As you can see, I have even tried using an webm but this also doesn't work... any ideas?
Updated Code:
<video width="100%" controls id="slider-video">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.webm" type="video/webm">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.mp4" type="video/mp4">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.m4v" type="video/m4v">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.ogg" type="video/ogg">
</video>
Make sure to use the correct MP4 compression with H264 codec (maximum 720p of resolution) with AC3 audio on it.
Edge is like browsers on iPad/iPhone and needs the same H264 compression style.
Drag and drop your mp4 video file to IE-Edge to play it directly from local file system. So you will be sure if your video correctly converted.
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.
I have a user requirement to embed mp4 and flv in the website. I have not found any success with this.
I realised that
<video> </video>
does not do the magic.
Is there any other way?
HTML5 does not support .FLV files directly. You will need to convert the .FLV files or use a Flash Player. See the spec for more info
You can, however, embed a .swf file, I believe. See this SO question for more information there.
As for MP4 format, Firefox versions before v21 and Opera do not support it. Opera and older versions of Firefox both support WebM and Ogg Vorbis format for video, however.
To the best of my knowledge, Chrome doesn't support WMV. Opera, Firefox and Chrome support Ogg Theora+Vorbis, while Chrome and Safari support MPEG-4 H.264+AAC.
<video controls>
<source type="video/ogg; codecs=theora,vorbis" src="video.ogv">
<source src="video.wmv">
Your browser doesn't support video, you may download the
video instead: Ogg
</video>
The only browser that might be able to play WMV is Opera on Linux (if you happen to have the right GStreamer plugins installed). That's not very useful, so you should probably just not use WMV with at all.
You might find this useful reading: Everything you need to know about HTML5 video and audio.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
read more about this : http://www.w3schools.com/html/html_videos.asp
Why You Should Use the MP4 File Format Instead of FLV : http://www.techsmith.com/tutorial-camtasia-why-you-should-use-mp4.html
I can I play a YouTube video in my site using HTML 5 <video> controls?
I am able to run the video for MP4, ogg format,
<video width="710" height="423" controls>
<source src="testvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
but how to run teh video where the source is from youtube
ex:
<video width="710" height="423" controls>
<source src="https://www.youtube.com/v/<youtube video id>?enablejsapi=1&rel=0&fs=1" type="????"></source>
Your browser does not support the video tag.
</video>
I provided the valid source and given type as video/youtube, but got the error as No video with supported format and MIME type found
Please let me know if you anybody have any input
Thanks, Sharath
if your tag
<youtube video id>
produces the 11 character code such as for this video
https://www.youtube.com/watch?v=t2ByLmLnYJ8
the 11 character code would be t2ByLmLnYJ8
then I think you should try
<iframe width="710" height="423"
src="http://www.youtube.com/embed/<youtube video id>">
</iframe>
It is my understanding that YouTube has taken over ensuring that the video format is compatible with the device so you don't have to worry about it with this method.
Yet another issue trying to get html5 video working.
I have created 3 versions of the same video in 3 different formats using ffmpeg: mp4, ogg, and webm.
The .ogg plays fine in chrome when listed as the first html5 video source, and the .mp4 plays fine in safari when listed as the first html5 video source, however, if I list the .mp4 source above the .ogg source, chrome will no longer load/play the .ogg video as it is defaulting to the .mp4 video which will not play, and in the same fashion, if I list the .ogg source file above the .mp4 source file, safari will not load the .mp4 video.
I am at a loss. Here is my embed code:
<video width="100%" height="100%">
<source src="./videos/Wildlife.ogg">
<source src="./videos/Wildlife.webm">
<source src="./videos/Wildlife.mp4">
</video>
Any ideas as to why the fallbacks between sources are is not working properly?
Why isn't safari obeying the fallback order and ignoring the .ogg/.webm files?
After quite a bit of troubleshooting, and adding/removing tags, I finally got the fallbacks to work properly by listing their types.
<video width="100%" height="100%">
<source src="./videos/Wildlife.ogg" type="video/ogg">
<source src="./videos/Wildlife.webm" type="video/webm">
<source src="./videos/Wildlife.mp4" type="video/mp4">
</video>
In other words, in my case, the browsers would not fallback to the next available (playable) video format unless I added the 'type=' attributes on each video type.