Develop Reference

HTML5 video tag doesn't work on mobile

I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.

add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser

This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.

Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs

If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.

Does phonegap support the html5 audio tag to play native audio file?

Does phonegap support the html5 audio tag to play native mp3 file??
I want to develop an application using phonegap and play mp3 files on it.
It works when an online source is given in audio tag, like below
<audio> <!--works this way!!!-->
<source src="http://www.alexkatz.me/codepen/music/interlude.mp3">
</audio>
but when I tried it with resident mp3 file in music folder, it didnt work. Like the snippet below
<audio><!--does not work this way :(-->
<source src="music/interlude.mp3">
</audio>
I also tried the following approaches to link the file in different assets directories, but it did not work
<audio><!--does not work this way:(-->
<source src="android_asset/www/music/interlude.mp3">
</audio>
<audio><!--does not work this way :(-->
<source src="/android_asset/www/music/interlude.mp3">
</audio>
<audio><!--does not work this way :(-->
<source src="file:///android_asset/www/music/interlude.mp3">
</audio>
Then I tried the "phonegap media API" to make it work, but "phonegap media API" doesn't have progress bar and seek bar, so I would like to ask any idea to play the native audio file in phonegap.
THANKS

Given a FileEntry object, using nativeURL works fine for me. I do something like this:
<audio id='sound'></audio>
And from javascript:
var sound = $$("#sound");
sound.attr('src', myFileEntry.nativeURL);
sound[0].play();
Where myFileEntry is a variable containing a FileEntry object pointing to the audio file.

How to play mp3 on link click

There is a simple link
01. The Name of Track
How to play the mp3 file, when user clicks on link? Please help me to find some simple and effective solution.
Thank you.
Thank you for help.
I choosed this solution http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ as the most appropriate in my case.

Use HTML5 <audio>
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
Note: As audio is an HTML5 tag, it won't support old browsers, so be
sure before you use it..
Or take a look at this article

Many browsers today (like Chrome and Firefox) will not play MP3 or MP4 files, due to IP restrictions. You can either transcode your files to compatible alternatives, like Ogg, or you'll have to rely on plugins to get universal browser support. One very good option is Soundmanager, which I'm using in a project where transcoding is not an option. It uses HTML 5 playback when it can, but falls back to an invisible Flash movie if the file type is not supported by the chosen browser. It's extremely flexible, but it has a bit of a learning curve. The demos are fantastic though, and provide several types of players that you can probably just drop in to whatever your interface is.

You have several options, you could use the html5 audio tag, which would create a small player that would allow you to play the audio:
<audio controls width="100" height="100">
<source src="some.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
You could also use the embed html tag:
<embed src="some.mp3" autostart="false" id="somemp3" enablejavascript="yes">
Then run the following javascript upon clicking the link:
var snd = document.getElementById(somemp3);
snd.play();
Or you could use the embed method for browsers that don't support html5 audio, by putting the above code within the audio tags, and it will show up only if the browser doesn't recognize the audio tag
You could also use a flash audio player.

Play Audio
<audio>
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
Using jQuery:
$("a").click(function() {
$("audio").play();
});

Embedding audio in IE(7+) with javascript capability to mute and unmute

I've been looking around for a method to embed audio onto a website, have a capability to loop and autoplay and also be able to mute and unmute the audio with javascript. I know that this is possible and very easy in html5, but I've heard that IE doesn't support html5 yet (or the audio tags perhaps).
I also need my embedded audio to work as far back as IE7. So i think that using the tags will work for all other browsers but IE, while I was hoping something like could work for IE; unfortunately, it doesn't support calls from javascript to mute and unmute - this is because I don't want any controls from the audio player to be visible; simply a custom sound button that the user can click to mute and unmute the audio. Any ideas? Seems that something like this is the most simple thing, but the hardest thing to code :/

Consider using a player that uses HTML 5 by default, but can fall back on Flash if it's not supported.
JPlayer can do that, and has a mute function.

HTML5 is your best bet.
<audio>
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mp3" />
<!--
You can put a flash player here in case the users browser doesn't support HTML5 or any of the audio formats you have added.
-->
</audio>
the attributes you might want to specify in the audio tag are controls='controls' to enable playback options like play pause and volume controls including mute; loop='loop' to enable auto-loop; autoplay='autoplay' obviously to autoplay; and preload='auto' to load the audio on page load (you can also specify "metadata" or "none")
your player would probably look like:
<audio preload='auto' autoplay='autoplay' controls='controls' loop='loop'>
<source src="yoursound.ogg" type="audio/ogg" />
<source src="yoursound.mp3" type="audio/mp3" />
<!--
Flash player here to fall back on if the users browser doesn't support HTML5
-->
</audio>

How do I minimize loading time for html5's audio tag?

Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego

I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.

Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.