I am encoding camera stream to ogg an showing it on HTML5 app.
On Windows:-
chrome - showing green screen sometimes and sometimes streams shows up.
Mozilla - working fine
On android
chrome - not working
Mozilla - Working fine
WebView- not working, a big play button appears
HTML code-
<video autoplay loop ><source type="video/ogg" src="streampath/name.ogg">
</video>
Vlc streaming code
cvlc -vvv rtsp://cameraInputStream --sout '#transcode{vcodec=theo, vb=800, channels=1, ab=128, samplerate=44100, width=320}:http{dst=:8090/output.ogg}'
Why it is not working on android chrome browser ,android webview and green screen on windows chrome.
Related
I have a video which plays fine on native FF and Galaxy S10/S10+ UA in FF Responsive Design mode. It played properly once on iPhone SE but hasn't worked again since.
In all other UAs available the thumbnail loads, but when pressing play, the video pauses immediately, and progresses by a few frames. the progress bar fills white implying the whole video is loaded.
Sometimes rapid clicking can make the video play as intended.
Here is the code:
<figure class="grid-item-1/3">
<video controls playsinline>
<source src="resources/video1.mp4" type="video/mp4">
<source src="resources/video2.webm" type="video/webm">
</video>
</figure>
The MP4 is encoded with H264.HP video and MPEG-4 AAC audio and the webm VP9 and Vorbis, the former being encoded by my phone when I took it and the latter, handbrake.
When the initial MP4 had issues, I researched codec compatibility, and encoded it as a .webm. When this didn't work I Googled the issue and was only able to find one relevant issue - where I added the playsinline tag.
I have tried viewing the page locally and on my webserver, neither behaves differently.
I have also tested the page on an actual phone - Google Pixel 4, Android 13, with Chrome & Firefox and the video works as intended.
I also tried adding height & width tags that matched the resolution of the source file, that just broke my CSS and the video still wouldn't play.
I'm trying to get my mp4 video file to show up on my iPhone 6s Safari browser. The video files seems to show up on my Mac laptop and Windows computer browsers like Chrome/Explorer/Firefox but when I upload to the server the video doesn't seem to show up even after I clear the cache on Safari on my phone. This is the HTML I'm using:
<video videoWidth videoHeight loop>
<source src="video/demoYVR.mp4" type="video/mp4">
</video>
Any suggestions an insight would be appreciated - Thanks :)
B
If you can download the video download it then play it on your media player in your phone.
If you can't download it try downloading Google or Firefox on the App Store.
I have a video that was recorded on a cellphone with the format MP4 and on Portrait screen orientation. Then I put it in this tag:
<video>
<source src="http://myserver/myvideo.mp4" type="video/mp4;">
</video>
and I also tried:
<video>
<source src="http://myserver/myvideo.mp4" type="video/mp4;codecs=avc1.42E01E,mp4a.40.2">
</video>
On Chrome and Firefox, both work perfectly.
OS: Windows 7
The problem: On Internet Explorer (9,10,11 and Edge), even the orientation of the video being the portrait, I can see it only in the landscape orientation. (With a rotation of 90 degrees)
I've installed Windows Media Player Classic and K-Lite Codec Pack and after that, I can see the video in the correct orientation only on the Windows Media Player Classic.
I mean, until now, I can see the video properly neither on Internet Explorer nor on Windows Media Player.
At first, I thought the problem could be something related to the tag <video> that couldn't work properly on Internet Explorer. But now I'm almost sure that the problem is related to some Codec or some updating related to the Windows that it is missing, but I searched a lot and I didn't find anything that could help me.
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’m having a problem getting HTML5 to work in IE9. It showed up as a failure to execute the video tag. It works fine in Firefox, Opera and Safari but I just got a blank screen in IE. This is the code:
<video width="320" height="240" controls="controls">
<source src="video1.mp4" type="video/mp4"/>
<source src="video1.ogg" type="video/ogg"/>
</video>
Then I ran the HTML5 compatibility test at http://html5test.com and I also got a blank screen in IE, so it’s more than the video tag that’s at issue.
Then I tried running an .mp4 sample video online ( http://archive.org/details/Pbtestfilemp4videotestmp4 ) - it does not run within the browser, but opens in VLC player! In Firefox, Opera and Safari, it runs in the browser.
I’ve reinstalled IE – no good. When I check the IE version, it says Internet Explorer 9, but after "Version:", there's a blank.
Any ideas?
I had a similar issue and it turned out that my server wasn't returning the correct MIME type for the video object. Check out this guy's info - http://blogs.msdn.com/b/thebeebs/archive/2011/07/20/html5-video-not-working-in-ie9-some-tips-to-debug.aspx
I just added this code to my .htaccess file and it worked immediately -
AddType video/mp4 .mp4
use [HTML5Shiv] to enable HTML5 tag for Internet Explorer. And add WebM video format to the sources