I would just like to have a confirmation or a good discussion on the reason why Video tag is very much useless for Phonegap Applications on Android 4.0 and above and Lolipop.
I am using Cordova 5.0 or better to say Phonegap 4.0 and I integrated both Video JS and a normal video tag. I have included the Video JS library, it's required CSS and fonts.
My Code looks some what like this:
<link rel="stylesheet" type="text/css" href="css/video-js.css">
<script type="text/javascript" src="libs/videojs/video.js"></script>
And I have added 2 VideoJS initialised tags as well as 2 normal tags with 1 online source and 1 locally embedded source:
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
local
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="libs/mov_bbb.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
net
<video controls src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
local
<video controls src="libs/mov_bbb.mp4" type="video/mp4">
</video>
But the problem is none of the 4 videos play. They appear to be completely buggy.
Below is the screenshot on Lolipop:
This is a real pinning issue as I do not understand when the webkits of phonegap and normal android browser are same then why such issue is arising. It basically makes the video tag feature of HTML5 useless and hence principle of phonegap of having the same business logic across.
Is there any solution available to this? Or is it a known cordova issue.
Thanks,
Ankit Tanna
Related
I'm trying to play a video taken with an Android phone. I want it to play in Chrome on a desktop or laptop. When I run the code, I get the video controls. When I play the video, I can hear the sound, but the video part is just empty background. I can get other videos to play just fine, but not the video from my phone. In the code below, the duration reports correctly (1.8 sec), but the height and width are reported as zero. (The test video from Big Buck Bunny plays just fine.)
What am I missing? (Yes, not a professional programmer, just a HS physics teacher...)
<html>
<body>
<video width="400" controls id="theVideo">
<source src="https://noragulfa.com/random/movie3.mp4" type="video/mp4">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
</video>
</body>
<script>
document.getElementById("theVideo").addEventListener('loadedmetadata', function(e) {
console.log(this.videoWidth, this.videoHeight, this.duration);
});
</script>
</html>
The video (movie3.mp4) contains a HEVC/H.265 (1920x1080#30fps) video stream.
Most browsers currently do not support HEVC/H.265. At the time of writing, only Safari does have support. Edge can also play HEVC/H.265 if the device has hardware decoding.
Please consider using AVC/H.264, VP8 or VP9 instead. For future reference, AV1 would also make a great alternative but support is currently not that great yet.
Your code is perfectly fine and working, The problem is with the video source that you are using, as you can see in the below code, I just replace your video URL with another URL and it working fine. the best solution would be to change your video source.
<html>
<body>
<video width="400" controls id="theVideo">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</body>
<script>
document.getElementById("theVideo").addEventListener('loadedmetadata', function(e) {
console.log(this.videoWidth, this.videoHeight, this.duration);
});
</script>
</html>
You can you any free sites to host your video if you want, and use that URL to your code or maybe try to find another Url of the same video online.
I have a web page, and I want music to play automatically, in a loop from a hidden source. I tried the audio and video tags, but that evidently isn’t supported yet. So I then I tried the embed tag, which will play the song, but I cant seem to have it happen in a loop, or automatically when the page is loaded. This embed tag is in the body of my html file:
<embed src="hereiam.mp3" AUTOSTART=TRUE LOOP=TRUE hidden=TRUE>
what can I do to get this song playing on android devices?
There isn't much you can do about audio since support has just been realsed for the latest versions or the android browser. Check this resource for more details about browser support http://caniuse.com/#search=web%20audio%20api
I would suggest you look into javascript libraries such as http://kolber.github.io/audiojs/
Quoting from the audiojs site about browser support:
Mobile Safari (iOS 3+) Android (2.2+, w/Flash) Safari (4+) Chrome (7+)
Firefox (3+, w/ Flash) Opera (10+, w/ Flash) IE (6, 7, 8, w/ Flash)
html5 works on the android Chrome browser
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
From W3Schools
Hope that helps!
i'm using html5 video player from http://www.videojs.com/ to play videos. the video works on normal pc but on android it doesn't play here's the link http://www.mawk3y.net/video/ and here's the head code
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
body code
<video id="video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="uploads/example.jpg"
data-setup="{}">
<source src="uploads/video.mp4" type='video/mp4'>
<source src="uploads/video.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
Plays ok for me on android 4.4.2, what version of android are you testing on. Older versions of Android have shaky support for the video element, particularly 2.2 or below
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.
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.