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.
Related
I'm working on kind of an educational site, where there are teachers and students around the world (potentially). Since it's a non-profit site, and I don't have the need for it to be done tomorrow (kind of a side project of something bigger), I wanted to know the best way to figure out how to do this. I'm not a programmer by trade, I've been on the systems side of things for years, but I understand most technology and the question here is more how to gauge what to do so I can get the right resources in place.
That said... here's what I am looking at. I figure the future is HTML5, and that's probably where I'd rather spend my efforts given that it will be cross platform and without the need for plugins. It will work on mobile as well. Question is, how well does HTML5 handle input media, say desktop capture and camera, or on mobile perhaps, where I'd want to use the user's phone camera, etc.
Second question is dynamic streaming... I've read about MPEG DASH, then there are technologies like Smooth Streaming (which I think given the way Silverlight is going is going to be gone or useless), then also Apple and Flash, but if I'm doing HTML5 it doesn't benefit me. Any ideas here would be really helpful, and the more detail the better! :)
That's about it... there are free chat services out there like using the MSN Web Chat controls (how good they are, I don't know, but worldwide most people have a Hotmail/MSN account) so I can use that for chat. I don't know its limitations of course, but that's something if people know or have suggestions, then I'm all ears.
As far as I know the video tags doesn't support input media as such, all it does rather well for the moment is play video files IF the file formats is supported by the given browser (different browsers different extensions) Also I have seen out there a solution where someone stream their own webcam into the video tags but that was on Mac only and using other technologies to help out.
The video tag is not supported by all browsers either, recent modern one will but if you need to support IE flash is still a better alternative way to provide videos across all platforms.
Streaming is only partially supported by some browsers and is not an easy task to achieve.
Here is few links that might help.
http://ishtml5readyyet.com/
http://html5readiness.com/
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
There are actually several posibilities to do this since HTML5 makes it super easy to stream most the basic input using video tags is however very much limited because you won't have actual access to the bytes like you would want.
But to convert something basic like mp4 to html5 compatible video just use this converter tool:
http://easyhtml5video.com/
I'm currenlty desigining and building a website where I need to embed some audio files (some 60sec extracts from various tracks from a band's album) so people can listen to their material quickly without having to download any files to their desktop etc.
I know QuickTime was a favourite in the past (perhaps it still is?) but I've had some experience with lag and poor load times of a web page because of this. Also, I understand there's an tag in HTML5 but I wonder about compatibility?
Really I just wondered if anyone had any recommendations on the a tried and tested approach to accomplish this?
Not an ideal solution, but I went for a Flash based plugin in the end - seems to work resonably well on compatible devices (shame it's not particularly well supported on mobiles/tablets etc. though).
Give 'dewplayer' a Google if you're interested...
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 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 !
I want so serve some videos on my site. They are available as .MP4 files gotten from a FlipShare camera.
Now I tried converting them to WMV (which succeeded, but when embedded in html in a <object id='mediaPlayer' width='320' height='285' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' etc' tag, users have to install an addon and the user experience of 10 Windows Media Players on the site isn't just so good.)
So then I looked at youtube and wondered how they do it, but I can't figure out what format they convert the video to.
So my question is: What format do I have to convert my video to, to show it in a player which does not need to be installed in the users browser. What tool do i need and what is the html code to embed such a video?
As you can see: starting from scratch.
PS: I often hear: This or that file extension is just a container, there can be anything inside. If you're using this in your answer, can you explain this to me, because I never understood this. For me a .cs is a c# file and a .doc a Word file, and not 'a container'.
This isn't an easy question. The basic answer is that you need to use a format that the user's computer already supports. There is no one answer to this question. YouTube encodes videos as MP4 and embeds them in the page with a Flash-based movie player, and Flash is pretty widely supported, but you'll notice that Flash isn't available on a lot of mobile platforms — so anybody using an iPhone is shut out if you go the Flash route.
HTML5 introduces the video tag, which is meant to solve this problem once and for all, but there's still a hiccup even there — most HTML5-enabled browsers support h.264-encoded video, but Mozilla supports Ogg Theora instead. YouTube is currently experimenting with a <video>-based player, so this does seem like the future.
I believe the current best practice to support the most people possible is to encode as h.264, try to serve as a <video> element, and have a Flash-based player as a fallback if that doesn't work (which can play the same h.264 file).
I'd say the most popular solution at the moment - utilized by YouTube and other major video portals - is H.264 encoded Flash-based Video. Flash can play Video since... I think Version 8 or 9, and has since gained significant market share.
My personal favourite Flash player is LongTail Player, but it isn't free for commercial use.
Here's a SO question with a list of Flash based players including open source ones.
Flash won't play on iPhone and iPad, though.
If you want to support computers with Flash Player 9 (I've seen some around, but I don't have any hard numbers) you will need to encode FLV files (which use a codec named Sorenson I think).
The upcoming alternative is HTML 5 Video but suport for that in browsers is nowhere near a major market share.
This question requires a re-answer now that it's no longer 2010 and HTML5 videos (as utilized by most video hosting sites) and chunk-based videos (sent as responses to periodic XHR requests - as utilized by Youtube) are the norm. While there is no best way to add video to your site, Flash is definitely nowhere close to even being good as of the time of writing of this answer.
The simple un-researched answer is: Just use a video tag and it'll work out!
This is simple and intuitive, and should work fine in many of your use-cases.
The researched answer is: Unfortunately, upload the video on Youtube and embed it on your site.
The pros and cons of embedding on Youtube over just having a video tag:
The pros:
Allows you to offer your video in a multitude of qualities.
Very bandwidth efficient. Youtube is bandwidth efficient for your users since it reencodes videos, and is also bandwidth efficient for you since you'll no longer be serving your videos off your own hosting.
Offers features like closed captions, automatic subs, playing at multiple speeds, full screen player, etc.
The cons:
It's a very heavily monetized service, chances are they'll want to put ads on your video if any of its content isn't 100% originally yours.
It has very strict laws/terms and conditions that you need to adhere to, at least in my opinion.
It tracks your users. If your application requires privacy and you can't rely on your users to protect themselves, then Youtube isn't ideal.
Other alternatives that mix the pros and cons of those two options are:
Using a Javascript video library to get HTML5 video along with some of the pros of using youtube, but none of its cons.
Using FFMPEG on the server side, for bandwidth issues.
Using some CDN that supports video to deliver the video, for reliability and bandwidth issues. My current favorites are ones that rely on service workers and the bittorent protocol, to stream from users to each other, but whether that suits you or not depends on your application.
Using AWS storage services to store the video, and AWS gateway/CDN services to serve it, which might be a great solution cost-wise and efficiency-wise if you don't want youtube but don't want to store videos on whatever infrastructure is serving your website.
Sources of this answer: Personal experience. As much as I didn't want to answer from experience, this question really needed a new answer! Feel free to edit it with something more concrete.
Converting your video MPEG-4 with H.264 will get you 97% coverage on current browsers across desktop and mobile, although some Android devices don't support hardware acceleration for this format. To address that you could also serve WebM with VP9 codec.
I wrote up a summary of browser support that might be useful: https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/