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.
Chrome browser on my Android phone is version 55. According to this doc, 'Muted autoplay for video is supported by Chrome for Android as of version 53.'
This is my code:
<div class="item-video">
<video width="560" height="315" autoplay muted controls loop playsinline>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>
</div>
Any ideas?
I even tested their sample page on my Android, and not working at all!
Could any one point me to a working cordova plugin that plays hls/m3u8 streams on android ? I tried using JW Player and html5 video tag and both didn't work!Thanks in advance.
<video id="myVideoTag" width="320" height="250" onerror="playbackFailed(event)" poster="http://www.freeiconspng.com/uploads/video-play-icon-26.gif" autobuffer controls autoplay>
<source id="mp4" src="http://www.nacentapps.com/m3u8/index.m3u8" type="video/mp4">
I have used this plugin cordova video plugin
it is working fine on android phone but not working ios.
so I have used Html5 video player
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
this code is not working on android phone. Is it working on ios? pls can you tell me? which video player support on android and ios phone?
As I understand Ionic has issues with embedding local videos using the HTML5 video tag, however you can open the video using fileOpener2 with ngCordova. It's easy to do this and you only have to know the file mime type to open whatever you need.
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