Develop Reference

Cordova, Angular2 & HTML5 Video

I'm trying to get something related to HTML5 videos working using Angular2 inside Cordova.
So far, this is what I achieved:
<video autoplay="true" loop="true" preload="auto" controls width=300 height=300 webkit-playsinline>
<source [src]="video.url" type="video/quicktime">
</video>
My video source is loaded from the network, and filled in correctly (the video object is correctly filled with a valid url (it works on my native ios app).
The only thing I can see displayed is the default poster, I can't play the video.
Did anyone managed to make this work ?
(I am deploying on an Android)

Play HTML5 video in iOS/Android native media player

Quite simple, I have a <video> tag as follows:
<video id="video" controls preload>
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Fairly standard. However, I'd like the video to open up on mobile devices using the built-in media player, essentially like watching a YouTube video from Safari on an iPhone.
How could I achieve this? The mobile site is built using jQuery Mobile.
Also, I think I read somewhere that removing the type attribute from the <source> tag increases compatibility. Is this true?

Update:
If you are trying to play the video file from an Hybrid android application, then below code should be of use for you. To play HTML5 videos in Android Native player here's a small piece of Java code to use -
Intent intent = new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”); //Specify the video file path
intent.setDataAndType(data,“video/mp4″);
startActivity(intent);
Now invoke the above Java native code using your JavaScript function passing the video element or path shown above and you should be good with your player.
To answer your second question, i think that removing type attribute doesn't increase the video compatibility in mobile phones as its a mandatory attribute to be set for the native player to know the encoding of the video file.

Video.js is compatible across most browsers but you have to set the viewports etc for mobile browsers.
This tutorial could probably help you out a little more.

You could try using the emerging HTML5 Fullscreen API to do this. It looks supported in iOS5+ and Android 4.0+
Take a look at this tutorial or read the full spec.
And I've not heard of any benefit to removing the type attribute. Taking that out would likely cause problems.

Video and audio formats for HTML5 app in Android

First, I've looked at this question, but it's a few years old and support for these things might have changed.
I'm developing an HTML5 app for Android using an IDE (HTML5 Builder) that allows to export the HTML5 app to an Android APK. I'm doing that and everything works fine except the video and audio files.
In that app I have one video in mp4 format, and a few audios in mp3 format. When I run that app as a web-app in the internet browser of a desktop and in an Android device the video and the audios work perfectly. However, when I export that app as an APK and install it in an Android device, everything works fine (navigation, css, images, etc) except the video and the audios.
Is it a problem of the format? I've been doing some research and it seems that mp4 and mp3 should be accepted... Besides, I've followed this method to encode the video as explained in this article (which is the same method explained in the question I mention above) but still the video doesn't work.
Any help with this would be appreciated!

First I will state that with me I've experienced a hit or miss with mobile devices. Some mobile devices will work fine with my code other times they wont work at all when using audio or video. I know the following works with iPhone, and supports my primary android device but not all android devices.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
I recomend making the same video files for all 3 formats, this way if a device doesn't support one format but supports another you'll be in luck. The same is for audio but you use the audio tags.
I would recomend installing the following Android Apps on your device to see if your device supports all of the HTML5 features. https://play.google.com/store/apps/details?id=com.mds.phonegapapijqm and https://play.google.com/store/apps/details?id=com.phonegap.phonegapdeveloper
I know you said you weren't using phonegap but still those apps are very handy for testing HTML apps for android in general.

hls in html5 not working in android chrome browser

I am getting issue in while playing video in "Android Phone's chrome Browser".
In that I am putting HTML5 video tag and providing m3u8 file's link as a source of video tag.
But it does not play in "Android's chrome browser".
But if I provide same m3u8 file's link to browser than it plays the video in Android's video player.
So what should be done to play video in HTML5 video tag?
Note: I have checked this with Android 4.0.3 and 4.1
Thanking in Advance,
Sagar Joshi

I think it depends on the encoding, by looking at the server logs the playlists are requested, but since no webm content is found nothing is played.
That's really unfortunate because the stock browser used to play h264 videos just fine.

the hls link will not work directly on android chrome you need a hls javascript library to get it to work, have a look at this code
<video id="my-video" style="width:640px height:480px;" controls>
<source src="{put your source link here}">
</video>
</div>
<script src="http://hlsbook.net/wp-content/examples/hls.min.js"></script>
<script>
if ( Hls.isSupported() ) {
var video = document.getElementById('my-video');
var hls = new Hls();
hls.loadSource('{put your source link here}');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
</script>
and remember the source link will not work on android platform, it works for ios-safari platform only as ios-safari platform don't require hls javascript, since Safari mobile does not support media source extensions and thus will not work with hls.js.
So for android you need to add the video link in the script tag in hls.loadSource and it will work on android chrome.

I ended up using video.js's VHS to solve this https://github.com/videojs/http-streaming.
In my case, I was using fragmented MP4s which isn't supported by Android's native HLS support. To workaround this, you need to force VHS to override native support:
<video id="player" class="video-js" width="360" height="640" controls playsinline muted preload="auto" poster="https://example.com/poster.jpg">
<source src="https://example.com/stream.m3u8" type="application/x-mpegURL">
</video>
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>
<script>
const player = videojs('player');
player.play({
overrideNative: true // <-- this fixes Android Chrome
});
</script>
I was using hls.js before but had several issues with fragments MP4s. Definitely recommend video.js/VHS.

Do I need a custom JS player for HTML 5 Video even I'm only considering the devices which has default support for HTML 5 Video?

I'm Making a Mobile website using jquery mobile and I'm only considering iPad, iPhone and Android device. I don't need Flash Fallback.
Then what is the best method to make video player only for mobile? Do i have to use any of these http://praegnanz.de/html5video/ or only html 5 video code will do. I don't need custom skin. Main thing is video should be smoothly played on iPad, iphone and Android.

You don't necessarily have to use one of those video libraries; you can use the HTML5 video element which allows you to style the controls via CSS and specify fallbacks (including flash and silverlight).
The main thing to consider will be what video codecs each mobile browser on iphone, ipad and android supports.
In between the tags, you can specify multiple video formats to fallback on.
I tested this on iphone and ipad and it could play the video using the HTML5 video element:
<video width="320" height="240" controls="controls">
<source src="http://blip.tv/file/get/Qtv-CarrieFisherTalksStarWarsOnQ553.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
iOS will support mp4 but i'm not an Android expert so i found this post that details encoding video that will play on Android via the html5 video element: Encoding Video For Android