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)

android video html 5 not working

I am trying to play my webm video on my android.
my code is:
<video width="290" height="517" autoplay loop>
<source src="/assets/videos/livematch.mp4" type="video/mp4;">
<source src="/assets/videos/livematch.webm" type="video/webm;">
</video>
I tried without semicolons as well ...type="video/mp4"...
When I open the page the placeholder of the video is black.
When I am trying to download the clip (press and hold on it) it actually saves the mp4.
How should i write the code so it will automatically recognise the device?

Hey I would try to remove the type attribute like showed in the first link I provided. Otherwise you can try to manually call video.play() like showed in the second link.
Playing HTML5 Videos in Browser -- What Works for Most Android Devices?
HTML5 <video> element on 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.

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.

HTML5 Video Problem

I have a problem in HTML5 I'm trying to show a video on the Android Emulator Browser
I'm using the following Code
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="TJ.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
It's not working
I tried to run the same code on Chrome but still not working
Any Ideas ??

Remove the type attribute from the <source> element and implement the play via the JavaScript API.
var video = document.getElementsByTagName('video')[0];
video.addEventListener('click',function(){ video.play(); },false);
A quirk of Android.
There's some useful stuff here: Making HTML5 Video Work on Android Phones.

I would suggest adding a codec property to the source tag.
More information on possible values here :
http://www.w3.org/TR/html5/video.html

As per the current updates chrome is not supporting the H.264 and its subset codecs. If your mp4 file has the H.264 codec then chrome wont play that file in video. This is my personal experience.