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.
Related
Unable to play live stream on chrome.
I have created small html file in which i am passing tcp or http url of live streaming in video tag of html but it doesn't work. please find the screenshot of codec information in screenshot below.
<!DOCTYPE html>
<html>
<body>
<h1>
Testing H264 on chrome html5
</h1>
<video width="800" controls>
<source src="tcp://[2612:f777:f:240e::898]:55151" type="video/mp4">
</video>
</body>
</html>
profile set is baseline and i have tried replacing tcp with http but it doesn't work
expected : live stream should play on chrome
actual : black player screen only
Codec info
chrome does not support tcp:// as a protocol. In fact it does not support any live "streaming" protocol. You need to use a player like video.js or hls.js (which uses MSE) along with a proper format like DASH or HLS
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
I want to play an HTML5 video (MP4, quickstart) in IE 11 using the autoplay option.
All browsers are working fine (Firefox, Chrome, mobile Android and iOS): they start playing the video immediately while downloading in background.
Only IE does not start playing before it completely downloaded the file. After downloading the file (I can see this in the apache log) the video starts playing - so the autoplay option is recognized in some way.
The code is really easy and only basic html5 video markup
<video id="myVideoPlayer" height="260" class="hidden-print" style="display:inline-block; float:left;" preload="auto" autoplay="autoplay" controls="controls" loop="loop">
<source src="/stream.php?id=1234&quality=hd" type="video/mp4"></source>
<source src="/stream.php?id=1234&quality=webm-hd" type="video/webm"></source>
</video>
If I directly call the stream.php I have the same issue - but again only in IE.
I can then see in my server logs:
one complete download of the video during page load
then some kind of embedded quicktime player is shown on the IE page. The player starts a new download ans starts playing the video while downloading.
and I then have a second entry for the complete download in the apache log.
Looks like IE has to download the while file to examine it and to decide how to open it. But the header of the video is at the beginning (this is why other browser are working), so why is this neccessary?
It was an apache configuration issue!
We are using DEFLATE as OutputFilter also for .php endings, so the transfer-encoding of the video streaming php-script was set to "chunked" which causes IE to completely download the file. Even setting "Content-length" header in the php file did not help. Only way was to disable DEFLATE for this php file.
I am trying to embed a video in my html page but it is not loading on the iPhone (all I get is a crossed out play button). It loads fine on the desktop and Android. It is not a browser issue because I get the same error using both Chrome and Safari on my iPhone.
<div id="video_container">
<video width="400" height="400" controls preload="none" poster="/static/img/tag_logo.png">
<source src="/static/videos/movie.mp4" type="video/mp4"></source>
</video>
</div>
Interestingly I have tested out my code with the video from the video.js sample project. If I replace my current source tag with this the video loads:
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>
However, I also downloaded the video from the video.js site, but it does not load on my iPhone
<source src="/static/videos/oceans-clip.mp4" type="video/mp4></source>
Codecs for the videos I am trying out all have AAC and H.264 codecs and are mp4s
I have also tried converting my video files to iPhone ready mp4 files using Miro Video Converter but still no luck with loading on the webpage
I am testing on localhost and am using nginx and flask
After more testing: according to the Chrome inspector I am getting response headers back for my video url GET request which explains why it plays on the desktop web. However, for iPhone, the Safari inspector says that I am not getting response headers back. And on Android, I do not get response headers back either, but for some reason the video is still able to play in the webpage on my Android device.
Any help would be appreciated
It could be your host server setup. For example when I use Go Daddy, SVG files won't display on my site. You can either check out the config or add a file that allows the MIME type. More on MIME types here: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
Just change the video extension to .mov.
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.