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
Related
I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
The mp4 video does not play from localhost.
But mp3 audio works.
i.e.
Following code for playing video (stored as C:\inetpub\wwwroot\video\testVideo.html) does not work when accessed through (http://localhost/video/testVideo.html)
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
But, following code for playing audio (C:\inetpub\wwwroot\audio\testAudio.html) works when accessed through (http://localhost/audio/testAudio.html)
<!DOCTYPE html>
<html>
<body>
<audio width="400" controls>
<source src="audip.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
</body>
</html>
However, they both work when webpage is launched by double clicking on html file i.e. webpage is accessed through (file:///C:/inetpub/wwwroot/audio/testAudio.html) or (file:///C:/inetpub/wwwroot/video/testVideo.html)
Please explain what am I doing wrong. And how to make video play from localhost.
I am using following browsers:
IE 11.0
Chrome 44.0
Firefox 40.0
I finally figured it out.
The video doesn't play via localhost, because IIS localhost in Windows doesn't contain MIME type entry (video/mp4) for .mp4 file format.
To make this work, a MIME type entry should be added in following way:
Open IIS Manager
Select your machine from Connection panel
From middle panel, double-click 'MIME Types'
Right-click on the list and select 'Add' option
Add file extension and MIME type e.g. for MP4 videos, file extension: .mp4 and MIME type: 'video/mp4'
Thats it.
Now refresh your page and Bingo!. It works.
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 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.
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.