We Keep Coding

HTML5 audio tag does not work in Android - Chrome when created in JS?

I'm using a .mp3 file, the .mp3 file plays okay when viewed directly and also when embeded using the HTML5 audio tag, however when creating the HTML5 audio tag in JS it does not play! (very strange)
I do not have this issue in any other browser/device, for example Desktop - Chrome works perfectly.
sound = document.createElement('audio');
sound.setAttribute('src', 'sound.mp3');
sound.play();
I've tested sound.canPlayType('audio/mpeg') and this produces true (so it is supported).
Perhaps there's a bug in Android - Chrome? (it is the latest version)

Looks like this is intended feature that spans more then just the Chrome browser. User interaction is required to get media elements to play.
Blink and WebKit have a setting for requiring a “user gesture” to play or pause an audio or video element, which is enabled in Opera for Android, Chrome for Android, the default Android browser, Safari for iOS and probably other browsers. This makes some sense, since mobile devices are used in public and in bed, where unsolicited sound from random Web sites could be a nuisance. Also, autoplaying video ads would waste bandwidth. Block Quote from 'blog.foolip.org'
Duplicate Threads from Other Users
Autoplay audio on mobile safari
How can I autoplay media in ios 4.2.1
Autoplay audio with ios 5 workaround?
Current Status
Developers have requested the deletion of 'mediaPlaybackRequiresUserGesture' which was reviewed and denied (for now). "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."
Upon further inspection i found this...
"I misunderstood the outcome of the discussion (removing mediaPlaybackRequiresUserGesture) surrounding this topic. We need to keep this code in order to not break google.com while gathering data about this feature."
Google.com relies on the feature being disabled, otherwise it breaks (they didn't say what it breaks).
Original Bug Report

Try appending it to the document body.
document.body.appendChild(sound);
Though it is possible that mobile devices will not automatically play the audio or videos. If you are targeting mobile devices, autoplaying is considered bad practice since it can consume bandwidth. So it may be worth considering adding controls.
sound.setAttribute('controls', 'true');

OK, well, now that we know it won't work with audio, the only path left to you is to switch to the Web Audio API. You'll need to load the mp3 into an ArrayBuffer (e.g. using an XHR), then pass that to the decodeAudioData method, which gets you an Audio buffer that you can play back at will from an AudioBufferSourceNode.

Not every browser on every platform can play the mp3 audio format. Generally, as I would recommend, you should provide two <source> elements within your audio element, one providing the mp3 format, and another one providing the ogg vorbis format.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Playing Large MP4s on Webpage

I have several MP4 videos I want to play over my website, playing using CloudFront and the files are in S3. However, the files are LARGE! We're talking 35G in size. Naturally this will not work wrt standard playing.
I'm using something like this:
<video id="my_video" width="700" height="550" poster="images/bunny.jpg" loop>
<source id="src_mp4" src="largefile.mp4" type="video/mp4" />
</video>
What options do I have available to make this work so it looks like it's streaming? I have the files as MP4 and AVI.

I don't think that there's any way to make it "look" like it's streaming, nor do I think there is there anything to actually achieve streaming of media files through HTML5.
A few things you could do:
Reduce the picture/audio quality of the videos
Convert the videos to the Webm format and serve them if the browser can play them (codec detection might be buggy so you may not want to do this)
Make the user wait a certain amount of time (maybe 30 seconds) and pray that the video can play until the end without having to buffer.
If you don't want to do any of the above, this question may help.

You can provide HTTP adaptive bitrate streaming with DASH in HTML5. Have a look at dash.js and the player example which works great but browser support is still limited.
You can provide 35 GB mp4 URLs to an HTML5 video tag providing your web server hosting the mp4 files is properly configured but generally you will be advised to consider streaming rather than progressive download for large files. There are streaming servers out there (Wowza, Red5, IIS ...) that would do that but this could represent a cost and some commitments on your side as you will need to maintain a streaming server and a player (most likely a hybrid player Flash + HTML5 to get good browser coverage).
Also platforms like Vimeo or Youtube (or other online video platforms) may fit your requirements in some cases.

How to embed an m4v video file to my html webpage?

I am currently trying to embed the m4v videos in my html webpage.
using the following code
<video controls="" height="360" width="480">
<source src="path/to/my/m4v/video" type="video/mp4">
<source src="path/to/my/m4v/video" type="video/ogg">
</source></source></video>
its working perfectly in google chrome.and it demands for an ogv video for mozilla browser.as we cant get an ogv video from our client.Also I am using it in hero framework.
I also tried to use the iframe tag used by youtube embed code.that works with webkit browser(google chrome).
but not able to play in mozilla firefox browser.I need to play m4v video in cross browsers.Is there any way or any html tag I am missing here?I explored alot but couldn't find an efficient solution.

m4v format files are not supporting by browsers, these format need player support. these files directly cannot run in browser.
like chrome, firefox, ie...etc.
Because these file format belongs to iOS operating system, developed by apple.
Read the instructions given by below link Wikipedia.
http://en.wikipedia.org/wiki/M4V
M4V - Video Supporting Features
these are the possibilities to
upload m4v files in the you tube that link we can use.
need to convert in to mp4 format all files and use in server.
need to write any script that converts the m4v files to mp4 fomat from server side.
need any builder that directly converts that m4v to mp4 formats files but it may be payable it.

You will probably need some external plugin or servcice support for your codec (m4v) since is not supported by all the browsers out there.
For a list of supported cross-browser video and audio formats I suggest you to check this documentation by MDN
Media formats supported by the HTML audio and video elements
In just a few Words, the formats you need to be 99% bross-browser are:
H.264 and AAC in MP4
Theora and Vorbis in Ogg
VP8 and Vorbis in WebM

HTML5 Video is just a convention to play a certain video formats with a new element for which browsers will implement an own player. HTML5 won’t provide players or something like that.
You have to look for the codecs and contained supported by most browsers, which, if I remember well, are mostly Theora for Video and Vorbis for audio, in an OGG container.
Then I remember that Webkit browsers will support Matroska (MKV) containers using V8 as video codec and Vorbis for audio.
My recommendation: provide an OGG file with Theora and Vorbis as video and audio codecs respectively. Inside provide a fallback using an MKV file with V8 and Vorbis and then, if you can, inside an MPG video file using Mpeg2 and MP2 (couldn’t think on something better) as video and audio codecs, fallback. Then as the last fallback, a Flash player playing a FLV video file.
<video src="thevideo.ogg">
<video src="firstFallback.mkv">
<object type="video/mpeg" src="secondFallback.mpeg">
<object
type="application/x-shockwave-flash"
src="player.swf?etc...">
<p>Download the video etc...<br />
or use a more modern browser to watch online, etc...</p>
</object>
</object>
</video>
</video>
Etc... ;-)
With this configuration, most (if not all) browsers should be able to play your video, preferring the most supported (and most modern) format. “Fallbacking” until they find a Flash Player.
For hints on what formats to support: take a look at the HTML5 Video part in Wikipedia.
Important: In your code you are refering to an absolute filesystem path, which is totally not-accesible for a web visitor. Maybe in the src you meant /video/file2.m4v.

You can use HTML5 video tag.
or
jplayer.org
or https://github.com/html5-ninja/Bootstrap-video-player-jQuery-plugin/blob/master/index.html
view about url you got complete reference .

If you're not forced to use Quicktime, the Flash based JW Player NOT free
can do Quicktime encoded MV4 if the client has Flash 10 installed.
Hence tried using the JWPlayer from the official site of jwplayer.
Will have to purchase it to get a licence key.
Enables to play .m4v video on cross browsers.
Works perfectly.

HTML5 video: How to test for HLS playing capability? (video.canPlayType)

I have video which is delivered over HLS. Now I'd like to test in JavaScript if the device actually can play HLS video in HTML5.
Usually in Javascript I did something like
document.createElement('video').canPlayType('video/mp4')
However I can't figure out which 'type' is the right one for HLS.
Apple's Safari HTML5 Audio and Video Guide seems to suggest "vnd.apple.mpegURL" ("Listing 1-7 Falling back to a plug-in for IE")
<video controls>
<source src="HttpLiveStream.m3u8" type="vnd.apple.mpegURL">
<source src="ProgressiveDowload.mp4" type="video/mp4">
....
but canPlayType("vnd.apple.mpegURL") return an empty string even on iOS devices which can play actual HLS streams perfectly fine.
Is there any way to check for playback capabilities without 'external knowledge' (e.g. "check for iOS user agent and assume it can play hls")?
I know I can specify multiple sources in a element and the browser will use the first playable source. However in my case I need feed a single URL to JW Player which I can't modify. So somehow I need to find the "best playable URL" from a set of video encodings. (An open source JS library which handles source selection would be a nice workaround though.)

I haven't tested this across the board, but it looks like you should be testing for the full HLS mimetype application/vnd.apple.mpegURL instead of just just vnd.apple.mpegURL.
application/x-mpegURL and audio/mpegurl are also suitable mimetypes for the HLS m3u8 file. audio/x-mpegurl is also listed as an acceptable mimetype according to Apple, but it doesn't appear to be mentioned in the actual HLS draft spec.
In Safari on iOS and OS X,
document.createElement('video').canPlayType('application/vnd.apple.mpegURL')
returns maybe. I'm not sure if there are any other browsers that support HLS -- Android doesn't seem to like this syntax (despite some assertions I've seen to the contrary), and I believe that it may be due to the fact that the actual video playback is delegated to an external application, rather than the browser itself.
References:
http://developer.apple.com/library/ios/#technotes/tn2235/_index.html
http://www.longtailvideo.com/html5/hls
https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-03
http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf

Javascript player for web video streaming compatible with iPad, iPhone, etc

I'm looking for a web video player with which I can keep the full compatibility with iOS devices: iPad, iPhone, etc (so I would exclude all Flash video players).
Until now I've used Flowplayer but I have some problems:
the main problem is that using flv files I can start very fastly to play the video but I don't have any compatibility with iOS devices. Instead, using mp4 files, I have the full compatibility with iOS devices but before playing the video I have to wait that all content of the file has been loaded (few minutes).
So my question is: does it exist a video format that allows me to play videos very fastly and also compatible also with iOS devices?

Not talking about HTML5 just yet, lets assume you are first interested in supporting most users and legacy devices. Unless you are using an embedded player, (such as Flash), there is nothing inherent in all browsers and/or JavaScript to allow you to play a video that is standardized across these devices. If you simply reference a link to the video file, you are asking the device to natively download and decode the video file. This is why it does not typically begin playing until the entire file is downloaded. This is dependent on each device having a compatible MIME encoding configured for the file type which points to a player that the browser can invoke to handle the file. When you use something like Flowplayer, usually these Flash applications can begin playing video before it is fully downloaded because it knows how to download the video from your server over HTTP and once it has received enough of the video stream (buffered the video), it can begin playing it. Currently your best option is to use something like you have been using for most devices, and have a separate link to the mp4 for iOS devices. If you just re-encode any videos you already have in FLV or whatever older formats you have been using to mp4, you should be able to play that in a current version of any Flash based player, as Flash will work with those files as well as it's legacy formats.

I've found this resource and it seems to be very good: http://code.google.com/p/php-mobile-detect/