mp4 from Android phone won't play as html video
Question
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>
2 answers
solution1
0 ACCPTED 2022-08-05 14:12:53
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.
solution2
0 2022-08-05 14:47:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.