The reason is that my medical official account project introduced a watermelon video plug-in to meet new needs, but after configuring the video files in the background, some can be displayed normally, while others are black screen. Both the Android and ios apps on my side are nested with the h5 pages I wrote.
Preliminary investigation:
Certain courses can’t be played on mobile phones. When played on a computer, the whole video is black, and the format is mp4. I don’t understand why other videos can be used for these two, so I ask the backend to check , I found that the size of these videos is more than 50M, other course videos are short, and the long video links returned by the interface open a black screen. When I open the links in various browsers, the screen is black. The video links returned by the interface are good or bad. The video display is normal, and some are black screens. At present, it is guessed that there is a problem in the process of converting the video after uploading on the web. The video link is not normal when opened in the browser. The wrong video has only sound but no picture, which is not normal. Maybe the parsing fails in some environments. The normal video returned can be played normally on all ends, and the link returned normally can be played normally on all ends.
Further investigation:
The backend downloads the video uploaded by Alibaba Cloud and it can be played normally. I started to investigate whether it is the reason of the player. The 4min long video can be played normally on the ios App, and the black screen is displayed on the Android app. can't see
Investigation in progress:
The video link that cannot be played normally will have a black screen in any browser. You need to solve the video link problem before proceeding to determine whether there is a problem with the front end. In Android, some videos can be played normally, and some returned videos cannot be played normally. The video links can be played normally, and they can be played normally when opened in various browsers. The links that cannot be played normally, all of them are opened in the Android environment. Black screen, I now think there is something wrong with the video format returned by the interface.
Final Results:
After viewing the normal playback video link, the encoding is h264.
A video with a black screen is downloaded and viewed after being encoded as mpeg4
After investigation: the browser's encoding method for MP4 is as follows:
the browser has very strict requirements for the encoding method of mp4.
The video encoding must be H.264 and
the audio encoding must be: AAC
Final solution:
In fact, it can be transcoded at the back end and then uploaded, but our technical implementation in this issue is too late, so we confirmed a way of artificial transcoding to avoid this problem in the early stage.
Convert the format of the file that cannot be played normally, and then upload it to oss. I use the MediaCoder software to transcode with one click and then upload it to play normally. It is necessary to manually transcode before uploading the video on the web, and uniformly convert the encoding format of the uploaded video to h264