I'm trying to embed some videos in my HTML. However, the video doesn't work in IE 10 and says invalid source. Here's what I have:
<video width="320" height="240" controls>
<source src="banana.mp4" type="video/mp4">
<source src="banana.ogg" type="video/ogg">
Your browser does not support this video!
</video>
I'm not even getting the message saying that the video isn't supported. Could this be a problem with my video?
Here's a fix that appears to be working for people. Simply install Windows Media Player if you don't have it. Also your video file must be in the same folder as your HTML page on the server
try adding:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to .htaccess hope it could help :)
or you can view this link :
MP4 html5 video not working on IE10
I used this in one of my project
<video width="640" height="360" controls="controls" autoplay="autoplay">
<source src="videopath" type="video/mp4">
<object data="" width="640" height="360">
<embed width="640" height="360" src="videopath">
</object>
</video>
Related
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.
Developing a site with html5 video, the video works fine in my localhost - MAMP and plays as it should, when it should however I've just put it live in a dev.example.com sub-domain and it is just showing the paused first frame of the video.
I have put the following in the .htaccess file:
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
An example of the code used for one of the videos is -
<video id="myVideo" autoplay muted loop>
<source src="manu_apollo2.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="manu_apollo2.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="manu_apollo2.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
If you link to videos directly through with the file extension on the domain then they load and work as normal.
Not sure if I'm overlooking something important, I believe I've encoded the videos correctly.
Anything glaringly obvious to anyone...
Many thanks!
HTML5 video wont play videos and I cannot play them directly from the server but they play in firefox and opera locally. I cant figure out what Im missing. Took this tag straight from w3c
<video width="500" height="300" controls>
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
ERROR is "No video with supported format and MIME type found"
EDIT: Error when accessing video directly in firefox is...
"Video playback aborted due to network error."
Add the following lines to your web-server's ".htaccess" file:
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
This clears up supported format/MIME type issue.
On a W3school video tag tutorial, I checked on Chrome and it was working fine but I copied the code in my project and it didn't work. Here is the code:
<video width="500" height="400" controls autoplay>
<source src="C:\Users\Sunny\Desktop\My_Passion.mp4" type="video/mp4"/>
</video>
The video source URL has to point to your web server where this page is being hosted. It won't work for local file paths like the one you currently have in there (pointing to a video file on your local computer).
So make sure the My_Passion.mp4 file is on your web server and then change the source as follows:
<source src="My_Passion.mp4" type="video/mp4"/>
Chrome does not support .mp4 video codec. ReEncode video.
<video width="500" height="400" controls autoplay>
<source src="C:\Users\Sunny\Desktop\My_Passion.mp4" type="video/mp4"/>
<source src="C:\Users\Sunny\Desktop\My_Passion.ogv" type="video/ogg"/>
</video>
You can use online video converter
I use the videojs as a html5 video player. but when the page was load, some errors like(firebug):
Video Error Object { originalEvent=Event error, type="error", timeStamp=
But the video is played normally after this, but I am afraid this will cause some unknown problems.
I use the videojs like:
<video id="my_video_1" class="video-js vjs-default-skin" preload="auto" width="640" height="480" data-setup="{}">
<source src="movie.mp4 " type='video/mp4'>
<source src="movie.ogv" type='video/ogg'>
</video>
Someone said that add this to htaccess file of /var/www/, or add them to apache httpd.conf file,
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
But it doesn't work yet.
What's the problem?