Issue
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>Solution
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.
Answered By - KompjoeFriek
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)
