Every browser, with exception of Chrome will not properly display my HTML5 video.
http://cordeck.ba.lightburncloud.com/test-video
Here is my markup:
<video class="video-js vjs-default-skin" controls="" autoplay="" preload="auto" data-setup="{}">
<source type="video/ogg" src="/files/videos/sample.ogg">
</video>
Firefox, for instance, displays the following message within my video box:
No video with supported format and MIME type found
In the error console, I get the following message:
HTTP "Content-Type" of "image/ogg" is not supported. Load of media resource http://http://cordeck.ba.lightburncloud.com//files/videos/sample.ogg failed.
To my knowledge, image/ogg type does not exist, nor do I use it in my site. What gives?
This issue was resolved. Apparently the CMS serving up the image was attaching its own MIME types and storing them alongside the file in the database.
The web server was sending the correct type, but getting overridden by a third party app.
Related
I want to play a video with html5 video tag from a network server.
I'm also make the test with an image, but I got, with Google Chrome, the error "Not allowed to load local resource".
I've already searched and this happens by security reasons of the new web browses.
For the video I'm using the basic html. If I play the video from my computer, like, it work well (obviously)
<video width="320" height="240" controls>
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But when I change the source to: 'file:///fileof1/FILESRV/videos/movie.mp4', nothing happens.
Anyone with a solution?
I read here: http://blogs.msdn.com/b/ie/archive/2014/09/26/html5-audio-and-video-improvements-for-windows-phone-8-1.aspx
that microsoft is supporting video html5 tag for wp8.1 but I am getting an Invalid Source message instead of my video stream.
I am 100% sure that the video is in the correct format because adding it to a native app using mediacontrol is working properly.
here is my html5 (I am using Cordova):
<video src="www.w3schools.com/html/movie.mp4" controls autoplay>
HTML5 Video is required for this example
</video>
I also tried with this
<video id="video1" width="420">
<source src="www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
but in this case nothing is displayed on my phone.
How can I have a video on my screen and playing it?
You must add the protocol (eg. "http://") to the resource name.
Try: src="http://www.w3schools.com/html/movie.mp4"
I have an HTML5 video player that plays mp4 videos (I only have mp4 videos as I'm not a fancy man with fancy multiple codecs).
I would like to display an error message for when the mp4 videos aren't supported or for when the asset is missing but the whole internet just seems to be people complaining they can't find videos so it's been hard to find a reliable source.
Long story short;
How do I add error messages for when the video is missing or if the codec isn't supported by the browser.
The video code is nice and simple, the source is generated from a server side script and it looks as follows;
<video controls height ="500px">
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support this video player, please consider upgrading to a modern browser or contact your sysadmin.
</video>
If you listen for an error event on the <source> element, it will tell you if loading fails.
<source src="videos/movie.mp4" type="video/mp4" onerror="alert('Could\'nt load video')">
Though you might want to just listen from JavaScript. ;)
I have the following code:
<video id="v2" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
data-setup="{}">
<source src="uploads/5148dc022c494_183a658049ae973e1f3451450d689f39.wmv.mp4" type='video/mp4'>
</video>
I've implemented the relevant JS scripts at the <head> tag and I can see the player frame loading including the controls, however the video is not displayed.
When I check the console log I can see some sort of error, the only thing I can see is:
Video Error
_V_.Event {originalEvent: Event, type: "error", isDefaultPrevented: function, timeStamp: 1363730623374, vdata1363730622853: true…}
I can unfold that message to view more details but nothing really tells me why the script fails.
The video itself is working when I download it. I can watch it with my windows media player without any issues.
Note: I'm using the latest Chrome version (tested IE10 as well, not working).
Most obvious reply would be to say that your video is not mp4 but wmv
either convert it to mp4 or use wmv type attribute
mind the extension which is currently .wmv.mp4
I am trying to stream from MJPEG server by using <video> but i get following error:
HTTP "Content-Type" of "multipart/x-mixed-replace" is not supported. Load of media resource http://localhost:8080/stream?topic=/gscam/image_raw?height=240?width=320 failed.
With following HTML code:
<video src="http://localhost:8080/stream?topic=/gscam/image_raw?height=240?width=320" id="vid"
height="240" width="320">
</video>
I tried in Firefox and Chrome without any luck.
As far as I know, the only way to embed MJPEG streams into Firefox and Chrome are with an tag.