Search code examples
htmlvideohtml5-videovideo-processing

Why Mp4 videos cannot be played normally on mobile devices？

Can you help me find out why these two videos play normally in the PC browser, but the first one cannot be played in the mobile browser? What is the problem with the video format encoding?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    yes
    <video
    controls
    src="https://static-official.5i5j.com/activity/marketinghub/test/20231222211656/1703250988.mp4"></video>
    
    No
    <video 
    controls
    src="https://static-official.5i5j.com/upload/2023/黑屏.mp4"></video>
</body>

</html>

enter image description here

I have relatively little knowledge about video coding. The above two videos, one is collected from users, and the other is a video encoded by software after I found that it cannot be played properly. But I want to know the real reason why the video cannot be played properly?

I try to use ffprobe to get media information of two videos but I can't find what is different about each other.

enter image description here

enter image description here

Solution

  • I found the cause of the problem. First of all, this problem only occurs on ios, and there is no problem on Android. The root of the problem lies in the compression level of the video.

    enter image description here enter image description here

    https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

    However, this document was last updated in 2016. My other [email protected] video can be played normally.

    I suspect it is due to the update of my document. If you find the relevant document, I hope you can leave a message and let me know.