I try play a video in html5 page on Android emulator 0f version 4.0, and I found that the screen
is black(can not show the video picture) and the audio play normally. I have searching the Internet for a couple of hours, still I can't get the answer I want. Can someone tell me reason or the solutions? By the way, I'm sorry for my poor English. Code is listed as below:
<div id="CHPlayer">
<video id="video" usemap="#Map" poster="./sources/1/t2.jpg" xmlsrc="./sources/1/t2.xml">
<source src="./sources/1/t2.mp4" type="video/mp4">
</video>
<img id="insertBar" src="./sources/1/t2.jpg" usemap="#Map" />
</div>
Does your video fit under the android requirements? Take a look at: http://developer.android.com/guide/appendix/media-formats.html
Also check under the initial grid for the encoding requirments.
If it is compatible then you also may have to make sure it isn't the emulator.
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 come today with a 'fairly easy' question around using video.
I have used this before and it seems to be working on Android devices. However, I just recently realised that the same video won't work on any Apple device.
My initial thought was around the video format (which is currently MP4), so I added a 'webm' back-up. MP4 should be enough, but I just wanted to give it a try (unsuccessfully)
Am I missing something? Do I need an specific format to be able to display a video on Apple devices?
<video class="intro-header-mobile" playsinline autoplay loop muted preload="auto" width="100%" height="100%">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.mp4" type="video/mp4">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.webm" type="video/webm">
</video>
Thank you everyone!
Diana
I have a simple video which I need to autoplay on any browser on android mobile devices.
Here is what I have implemented
https://output.jsbin.com/bovarep
<video poster="https://dj7u9rvtp3yka.cloudfront.net/layout/video_posters/THAMarchEditorial/TOP5TRENDS-1p777-en_v1.jpg" class=" m-u-media wrapper__video" autoplay preload="auto" muted="" loop="" media_id="media1">
<source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.mp4" type="video/mp4">
<source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.webm" type="video/webm">
</video>
The video will autoplay on some "OS version and Chrome version" combinations but doesn't autoplay on some other combinations. And the combination at which it works is random.
Please let us know if someone is facing the same issue or if someone has solved the issue.
Thank s in advance.
Additional info:
Autoplay works on (Chrome - 64.0.3282.137, OS - Android 8.0.0),
Autoplay doesn't work on (Chrome - 63.0.3239.111, OS - Android 7.0.0)
Found out what exactly was the issue.
So the issue is not exactly an Android OS version or Chrome version. Recent versions of chrome have 'Data saver' feature which prevents the chrome from loading and autoplaying the video, hence video doesn't autoplay even if it is muted.
To solve this issue, since there were no other ways to autoplay the video we just show a prominent play icon which tells the user that it is a video.
You can look into promise returned by calling video.play() based on which you can show the play icon in the case of failed promise.
More about HTML video promise - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
Let us know if anyone has a better solution.
Thank you
I'm using the following code to display a video
<video id="v1" class="no-fastclick" controls>
<source class="no-fastclick" src="img/home.mp4" type="video/mp4">
</video>
Actually "nearly" everything works. The Video is playable but I only have sound. However, when making it fullscreen I also see the video. So everything seems to be right - except that it doesn't show up when not being in full screen.
I cannot found a method to force the fullscreen on click or make it playable in small version.
Update
After discussing with the OP in the comments below, I built a test app and uploaded it for the OP.
I have confirmed the video works on an actual device. Having tried the same app on the emulator I was able to reproduce the issue. It would seem that this is an emulator issue and not an issue with Cordova or actual devices.
Edit
It seems you are not the only one having this issue. There is a plugin that should enable video tags to work properly here:
https://github.com/jaeger25/Html5Video/blob/master/README.md
Installation:
cordova plugin add https://github.com/jaeger25/Html5Video.git
Sample usage:
<video id="myvideo" loop></video>
Hopefully this will work!
Original
You may need to add the webkit-playsinline attribute like this example:
<video webkit-playsinline>
<source src="mySource.mp4" type="video/mp4">
</video>
Also you may need to add this to your config.xml
<preference name="AllowInlineMediaPlayback" value="true"/>
I want to play audio in the Android browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. I'm using Android Virtual Device 4.0.3.
Does anyone know why?
The Android source:
webView.loadUrl("file:///android_asset/www/test.html");
The HTML file:
<audio controls="controls" format="mp3">
<source src="achievement.mp3" />
</audio>
(i couldn't hear the audio with <embed> and <object> tags either)
I found the solution here
Embed Background Audio in Android >= 2.3 Browser
<audio id="audio1" controls="controls" loop="loop" autoplay="autoplay" >
<source src="scene1.mp3" type="audio/mpeg" />
<source src="scene1.ogg" type="audio/ogg" />
</audio>
it's work for me :)
I did a quick search and found this issue report on google code. It seems the tag is unsupported. However, the tag is and can play mp3 files. The down side is (if I read it correctly) that the controls are not available. Give it a read and let us know how you make out.
I found another question that has lots of different possible solutions: Check it out