Playing an audio file, from a web page, on a smartphone - html

I'm creating an alternate page of a web site just for smartphones that needs to play an audio file. I can reformat for mp3, ogg, wav, whatever works. I've tried the HTML5 "audio" tag and tested on an iPhone, with no luck. Anyone have any ideas and/or a link to a page that works? -Thanks

Each phone is going to be a bit different, in what it supports. Many devices support Flash, but not iOS. It all depends on which platforms you are targeting.
If the audio doesn't have to be playing with the page visible, you can try just linking to a playlist file (such as m3u or pls). Any device I've tested with supports this method, except for Android. For Android, just load Flash.

Related

How is this Flash video playable on mobile devices [using JWPlayer]?

I'm trying to make my anime-streaming website FLV videos playable on mobile device, so I changed the technology I'm using from flash to HTML5 MP4, webM and OGG.
But while I'm surfing this site - which is using jwPlayer - from my Android device:
Here
I found that the video is working well although it is using FLV?
Can anyone explain how this could happen?
It is a feature of JWplayer. It will detect when Flash is not supported and switch to HTML5.
This is from their website:
JW Player is tested on the world’s most popular desktop browsers to
ensure the best playback experience for your viewers. From IE8 to the
latest version of Chrome, on Windows and OS X we ensure that any user
can watch your content. JW Player always selects the best playback
mode for your media behind the scenes.
http://www.jwplayer.com/products/jwplayer/html5-and-flash/
I found that the video is working well although it is using FLV ?!
Please, can anyone explain how could this happen ?
Are you saying FLV because it is Flash? Did you know Flash itself can play MP4 files anyway? Looking at the source code I see MP4 video files provided so I think they are just using Flash Player app to play MP4 files where plugin is available or else then using HTML5 for mobile etc.
Test by disabling Flash Plugin in mobile browser settings, you should now see an HTML5 player instead for handling exact same file that Flash app was playing.
So to answer : How is this Flash video playable on mobile devices [using JWPlayer]?
You have a mobile with Flash Plugin installed and you visited a page that had a video player app made with Flash to play some MP4 files. Your mobile is flash capable so it worked and you watched some MP4 file using a Flash decoder instead of an HTML5 decoder.

Using phonegap and html5 video tag: caveats?

I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.

HTML5 video problems - captivate 6. Browser and Device compatibility?

I am doing some help videos, they are required to work on all browsers and devices - ipod/pad/phone android etc.
My understanding was you can do this with HTML5 and have fallbacks for each device/browser?
However i have had to add javascript to detect the browser then go off accordingly to different html pages where the video will play on that browser or device.
Surely there must be a simpler way to do this in ONE html page? What formats are used for each browser?
I am using ChromeFrame to get around the IE issues too.
Thanks
I recommend looking into video.js which takes care of browser support detection.
For video formats you can use mp4 and WebM together with video.js it should cover all browsers.
From the videoJS website...
Web Browsers
Whether a user has the latest version of a browser, or something
ancient like Internet Explorer 6, they'll get a similar experience
with Video.js which uses a super-lightweight Flash player for browsers
that don't support HTML5 video.
Video Formats
Web video formats can get complicated. Video.js can make it easier by using a single MP4 file for all users, or additional
formats like WebM, Ogg, and even HTTP Live Streaming for greater HTML5
compatibility.
PS. Be aware that there will be visual differences between browsers (mostly older IE browsers), especially when the Flash fallback kicks in. The fullscreen option is the most notable difference.

How can i make a Flash-free, basic audio control?

I need to make a basic audio control: one audio file, play and pause buttons, no more.
I cannot use Flash at all - this website will only be used if the client does not have flash enabled.
HTML5 does not seem to be a good solution because my target clients (who do not enable Flash) most likely won't have modern browsers. Even worse, Safari does not seem to play the best solution available (jPlayer).
The lastest versions of all the main browsers (IE, Chrome, FF, Safari, Mobile Safari, Android) can play audio natively using the HTML5 audio element (so long as the media is encoded in a supported format).
IE6,7 and 8 can only play audio directly in the browser with the help of plugs-ins (e.g. Quicktime, Flash etc.).
So, if you have IE8 or less i'm afraid you cannot play audio directly in the browser without Flash or another plug-in.

How to add video into a webpage for mobile web browsers

Our company is making a mobile version of our website. We have several product videos we want to show on the mobile version.
When I try to use
video
I get sound playing but a black screen on my htc incredible android os phone.
I'm thinking that the video is playing but in a different browser window. I need it to display all in one window without having to switch to a different window.
I tried the html embed tags and get no video or sound at all, from what I've read these tags are not very realiable cross browser.
I also just tried the html5 video tags below. I get an icon identifying that it's a video file but it doesn't play.
<video src="video.wmv" controls="controls">
your browser does not support the video tag
</video>
Is there a special format the video file needs to be in? Should I be using the href or embed tags, what other options do I have?
If it helps to know, I'm using the mobile doctype on my webpages.
Thanks
The video format you need to send to the browser varies by browser. Firefox supports Ogg Theora, everybody else seems to support H.264 in an MPEG-4 container (MP4 file.)
See here for an example: http://html5demos.com/two-videos
In any case, WMV won't work.
Android doesn't support the WMV format normally. Here is a list of the supported formats:
http://developer.android.com/guide/appendix/media-formats.html
If iPhone/blackberry/etc don't have a format in common, you may need some javascript magic based on the user-agent to choose which file to embed.
I've found a simple solution to my problem. YouTube. Upload videos on youtube that need to play on your mobile web site and they work. PERIOD.
No fuss! Just copy the embedded URL from the YouTube video page to your mobile page and your all set to go.
I'm not exactly sure how YouTube makes the videos compatible.I'm guessing when uploading the video it's automatically converted into several formats so that the right codec / container is played based on what smart phone is accessing the page.
This list is not extensive and I'll probably think of more later, but comment if you can think of any more advantages or disadvantages of using YouTube for mobile videos.
Advantages:
++ YouTube is universally accepted amongst most major smart phones (therefore your video should play!).
+ If you have limited bandwidth you don't need to worry about wasting any bandwidth of your own.
++ Easy to setup, little to no configuration (setting video resolution). It just works! (encapsulation...)
Disadvantages:
- YouTube symbol during video play back
- It's not hosted on your hosting service. May not be tracked by some analytic services. (requires custom tracking? onclick java-script event?)
- YouTube bandwidth may not be acceptable for smooth replay? (although from initial video viewing bandwidth seems acceptable (minimal buffering...), but not confirmed...). Probably mostly dependent on the cell phone 3g / 4g connection quality.
- limited video file size / resolutions? shouldn't be a problem because you'll want a lower quality video for smart phones.
I would like to know exactly how YouTube make it's videos compatible with smart phones so if necessary I could host the videos myself, but for now this seems to be the best choice.