Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 video of type video/mp4 playing audio only

I have an app built with codeigniter and launched in Facebook. This app should allow users to upload videos of type mp4.

The videos upload fine. I had set the mime type in mimes.php as 'mp4' => array('video/mp4', 'application/octet-stream').

I uploaded a video that showed up as type application/octet-stream when I checked with codeigniters file upload class. But I uploaded another video with ext .mp4 and it was uploaded successfully.

The video that plays fine shows up as type application/octet-stream when I echo the file type, but the video that only plays audio shows up as type video/mp4.

However when I try to view the video in my interface, using HTML5 video, it plays, but only audio. You can hear the sound as the video plays but I can't see the video itself.

How do i fix this?

EDIT:

The video that plays only sound can be seen here

You can see the video if you view it on my machine in a video player, but it only plays audio on the web.

The code that displays the video is

<video  width="410" controls>
              <source src=" <?php echo base_url().$upload_path.'/'.$videos_dir.'/'. $item['name'];?>" type="video/mp4">

                Your browser does not support the video tag.
            </video>
like image 798
Tester Avatar asked Feb 05 '14 18:02

Tester


People also ask

Why MP4 video is not playing in HTML?

If your mp4 video does not play in the web browsers and devices, it's probably because the video is not HTML5 compatible. You can view this tutorial to convert the video file to HTML5 compatible: How to convert video to HTML5 compatible.

Is MP4 an HTML5 video?

HTML5 Video Format for Desktop and Mobile StreamingThe HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24.

How do I embed an MP4 video in HTML?

Use the <video> tag for inserting videos in HTML The HTML5 <video> element specifies a standard way to embed a video in a web page. That is to say that the video is identified by adding a video URL to a source attribute. One can use it to embed videos imported from the computer or hosted by an external website.

When implementing the HTML5 video element How do you ensure that?

In order to ensure that a video is accessible by all of the target browsers, you'll need to provide, at minimum, two different source elements for your video element. Example 1-5 shows an HTML5 web page with a video element containing two different video sources: one in H.


1 Answers

Turns out the video was not properly encoded to be supported by HTML5 video tag.

HTML5 video requires MP4 videos with H264 video codec and AAC audio codec.

The problem video was not of codec H264. Running it through a converter fixed it.

like image 97
Tester Avatar answered Oct 06 '22 10:10

Tester