Home  >  Article  >  Web Front-end  >  How to solve the problem that the video tag in H5 cannot play mp4 files

How to solve the problem that the video tag in H5 cannot play mp4 files

php中世界最好的语言
php中世界最好的语言Original
2018-03-26 15:59:178307browse

This time I will bring you how to solve the problem that the video tag in H5 cannot play mp4 files. What are the precautions to solve the problem that the video tag in H5 cannot play mp4 files? The following is a practical case. Let’s take a look. one time.

Preface

Recently I discovered a problem. I recorded a 1.mp4 file on my mobile phone and it can be played normally by mainstream browsers. But using the format factory to transcode the rmvb file into 2.mp4 cannot be played. The solution was finally solved by searching for relevant information. I will share it below for your reference and study. Let’s take a look at the detailed introduction:

Problem Analysis

手机recorded

VideoAttributes:


Video attributes for formatting factory transcoding:


First eliminate code problems, path problems, browser incompatibility, etc. The transcoded video encoding is mp4v, which is why it cannot be played. Just convert it to AVC (H264) encoding.

Check the documentation for the video formats and encodings supported by the video tag:

    ##MPEG4 = with H.264 video encoding and AAC
  • Audio

    Encoded MPEG4 file

  • WebM = WebM file with VP8 video encoding and Vorbis audio encoding
  • Ogg = Ogg files with Theora video encoding and Vorbis audio encoding
  • Through the above information, we found that there are only h264-encoded MP4 videos (MPEG-LA company) and VP8-encoded webm format videos (Google company) and Theora encoded ogg format video (iTouch development) can support the
html5

.

SolutionThe video tag allows multiple source elements. The source element can link different video files. The browser will use the first one. Recognizable format, which can be used to resolve browser compatibility issues.

<video controls="controls" width="100%">
  <source src="1.mp4" type="video/mp4">
  <source src="1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Implementation of front-end page jump and value acquisition

H5 Detailed explanation of multi-threading (Worker SharedWorker)

The above is the detailed content of How to solve the problem that the video tag in H5 cannot play mp4 files. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn