I was wondering how to embed a video on a webpage to have it compatible with mobile devices. I am kinda new to the whole mobileweb. So I set up some testing pages and tried them out with some devices of my friends. Flash is obviously not the way to go. Embed tag neither. html5 video tag neither. I also tried to nest them for fallback compatibility but just didn't get it right.
So I had a look at youtube. They are using rtsp streams and they just let the device handle the rtsp:// links. This seemed to be working everywhere, and I think they do it for a reason. So I had a look at rtsp protocol the possibilities to serve such a stream.
Turned out its really simple and doesn't really differ much from the http protocol. There is e.g. ffserver out there for that.
But every free/os implementation seems to be testing/buggy ...
So I ask you guys. I cant be the first stumbling across this problem.
Isn't there a nice tested way to embed videos with nice compatibility for mobile devices? preferably served from a http source!
looks like html5 is the way to go but important are the correct encoding settings.
h264, baseline 1.3 seems to work fine with iphone4 and android 2.1 ... rest untested.
I've been collection information about mobile compatible video players, you can find it here: http://blog.jsethi.com/media/html5-video-players/
The solution would be to use Kaltura open source platform. If you have have the knowledge to set it up it's the winning solution.
Here is my kaltura running HTML5 with flash fallback. http://cdpn.io/DeKuo
Read more here http://www.kaltura.org/
and here http://html5video.org/
Good Luck !
Related
I want to post some mp4 videos in my site and I don't want to upload it to youtube or any 3rd party web app which will let me embed it into my website. I also don't want to use any blogging system like wordpress, drupal. So then what is the best way to post it to my site so that most devices will be able to view it. And can I customize the player which I use?
I have seen w3schools html5 video but I didn't find it helpful. I have also seen ' Video onto a website without plugins ' but I am not satisfied with that.
[Hint: I am ready to convert my video into any format required.]
Thanks in advance.
I have used video.js for this purpose, it worked for me. I haven't tried editing it much, but it has options.
http://www.videojs.com
Use the HTML 5 video element. You'll have to upload your video in different formats, since there is no video format that is supported by all browsers, but support for the video element itself is quite good. IE8 doesn't support it, but IE8 is already very old. With the video tag you don't need Javascript or flash plugins.
For an overview of browser support see CanIUse. Another source with much detailed information about video formats and how to convert them is DiveIntoHTML5.info.
HTML5 audio on mobile devices has many limitations and actually I would call them bugs.
My app implementing something like audio player.
Actually all it works fine for desktop but in mobile version I encounter many bugs and have to do many workarounds different for different browsers and os to get it work, and still it sucks.
I haven't dived into web audio api, but it seems to be designed for slightly different tasks.
So my question is, is it make sense (and is it possible?) to replace HTML5 audio with Web Audio API, if I need just to load files and play them (partly, sprites) just to avoid limitations and bugs of HTML5 audio?
I think you're probably going to find at least as many bugs or edge cases with Web Audio on mobile as you're seeing using the <audio> element. Plus, support for Web Audio on mobile platforms isn't great. If it were me, I'd be inclined to stick with <audio> unless you have a specific use-case that can only be addressed by the Web Audio API.
Actually, I'll disagree - if your goal is to play short snippets of sounds, particularly simultaneously - e.g., providing sound for a platform jumper game - Web Audio is going to be a lot easier to use, including on mobile. has issues managing multiple files/instances. On the other hand, if the problems you're running in to are due to decoding issues, or you're using mostly long files, it's not going to help, as Kevin and Brad said.
I recommend SoundJS which I develop, it takes a lot of the pain out of supporting audio on multiple devices. Basically it lets you write a single code base that works everywhere and already deals with edge cases where it can.
HTML Audio element implementation on mobile devices is really terrible, so if not SoundJS I would at least recommend switching to Web Audio which works well on iOS and Android Chrome but is not supported in Android Native browser.
idbehold's comment is accurate, the most common problem with mobile devices is having to play audio inside of a user initiated event (touch). I've developed a solution to this problem, shared in the Mobile Safe Approach tutorial.
Hope that helps.
I want to record user Video with Webcam and save the recorded video to Server, using Ruby On Rails, which should work in all browsers .I have tried the below approaches, which did not solve my problem.
http://www.html5rocks.com/en/tutorials/getusermedia/intro/ - tried and not able to play / save the recorded video
http://www.xarg.org/project/jquery-webcam-plugin/ - verified and does not seem to support video recording.
http://nimbb.com/ - is a paid one
Please let me know, if any body has a standard solution for this (which works in All / Most of the browsers, preferably an open source).
Any help would be greatly appreciated. Thanks in Advance!
This is a pretty old question, but just came across it and thought I would at least offer a solution to all future visitors who stumble across this question:
The MediaStreamRecorder API is currently unimplemented in chrome, however some users have found alternative ways to get it working by stitching together .webp images into a .webm video. Now, it might not be the best idea to use that experiment, but other projects have taken that idea a lot farther by implementing a cross platform library that implements that idea (and other browser specific solution) of which the first is aptly called MediaStreamRecorder. Another option is RecordRTC which I have used myself in the past of which one advantage is that they have some specific server side Ruby code to get it working neatly (not that you need it if you want to do a simple upload, but sometimes you might want to do more than that).
Recording video in the browser is mostly a client side affair so the fact that you're using Ruby server side will not impact the solution.
The only solution that works consistently across desktop and mobile browsers would be one that implements the following:
desktop: a Flash video recording client + media server
mobile: HTML Media Capture
Some notes on your links:
The HTML5Rocks article mentions the HTML Media Capture draft/standard which only works on mobile browsers
The jQuery webcam plugin uses Flash to access the webcam but it can't record video (it doesn't connect to a media server)
Commercial hosted solutions include nimbb, Pipe and ziggeo
Commercial self hosted solutions include HDFVR (which supports Ruby)
I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.
I am going to be working on designing a mobile-phone friendly version of a client's website. I have done the research on how to build it, bu, as we have a few videos on it, I need to know what video formats would work best when a phone accesses the site. Any ideas?
Any format which is most widely used in mobile phones. Most high end phones play flash files (and 3gp, mp4 etc), Others support 3gp and mp4.
So I would go for 3gp as it will be supported by most of the phones.
As far as I know, you would likely do well to invest in WURFL and then convert something like an MP3 or MP4 on the server to the media that is necessary for the mobile phone. In other words, don't just serve up 3gp or mp4 and assume. Note, though, I'm still learning this.