HTML5 Video element not playing an .mp4 with no audio codec - javascript

I'm trying to upload a video to a Angular app using ng-file-upload. All works fine until I try and upload a .mp4 video with no audio codec. The video element shows, it shows the correct duration in the control panel, it just doesn't play. Clicking play does nothing, the first frame is not shown.
If I upload any other .mp4 that contains audio the video plays without error.
Below is the information I can see about the file that is failing, as you can see only the video codec is listed for this file.
Here is the 'more info' for another .mp4 file that has audio, this one uploads perfectly fine and plays in the HTML5 video element with no errors.
As you can see, the video that works states the audio codec as AAC, which is expected for .mp4, and shows Audio Channels "2", i'm unsure of the purpose of 'Audio Channels' is in all honesty.
I've been debugging this thing all day and the only difference in files that I can see is in the above images.
Should HTML5 video player play a .mp4 video without any audio codec listed?
What leads me to think the audio has a role to play in this is w3schools description of an Mpeg-4 file:
MP4 = MPEG 4 files with H264 video codec and AAC audio codec
Has anyone had this issue before?
Edit
After adding a listener to the error event on the video I can see that I get a MediaError object with code 3 as a value, so this is a decoding issue I can see.
Screenshot below
Further edit
I've now debugged this as far as going into Chromes 'media-internals' logs. The error Chrome is encountering is now confirmed to be because of the missing audio, see the screenshot below:
Unsure why an error isn't clearly thrown because of this. Is this the end of the line, it's weird because if I upload the video to Facebook it uploads just fine.

I'd advice you to check if the .mp4 file is properly converted. I've already checked it on my computer and it should be normally played - just video with no audio (Ubuntu 14.04, Chrome 51.0.2704.106).
Use ffmpeg to check the available media tracks:
ffmpeg -i input_file.mp4
Then try to use the source with audio track and convert it to one without an audio. This command will remove all audio tracks:
ffmpeg -i input_file.mp4 -vcodec copy -an output_file.mp4
HTML5 specification doesn't tell what should happen when we don't have a proper codec for one of the media tracks. Just for reference - HTML5
It's always a good idea to check the playback on any other player, VLC is a good one for reference.

Related

Record webRTC stream in mp4 using kurento media server

I am working on recording the video stream using WebRTC and Kurento Media server. The recording is working fine, but I am facing an issue.
The browser is storing the media in Webm format, which does not keep the metadata information. If I am recording a mobile webRTC stream in portrait mode, then the Kurento is recording that stream, but when I am playing that video, it's being played in landscape mode everywhere.
I have done some R&D on it and found the Webm does not keep the metadata information, so I have record the video in mp4 format.
I have read the documentation of the Kurento media server but didn't found anywhere that how to record the video in mp4 format.
Can anybody tell me how we can do that?
I have tried the following things
- Changed the file extension to mp4
Please try mentioning the recorder end-point profile spec (webm, MP4, MKV)
You can post your code as well so that corrections can be suggested.
You can also follow this code https://github.com/Kurento/kurento-tutorial-js/blob/master/kurento-recorder/js/index.js
At line number 112 you can include profile based on the specs used in kurento-utils.js

Transcode RTSP for HTML5 Video tag in browser

I have an rtsp stream with MP4 video codec and G711 audio codec. I need to get it work without FlashPlugins.
Video stream in WEB is a frustrating thing.
Is there a possibilty to convert in browser with javascript my Mp4 video and G711 audio in a webm or a h264 codec on fly to use it as a stream for video html5 element or any player!
The problem is, flowplayer does not support rtsp stream, vlc does not work in chrome and flash does not support into android.
so there are many many problems to get it work.
So if there is a possbility to transocde the rtsp stream on the client perhapse there is a possibility to resolve this problems.
thx
Firstly - MP4 is not a video codec but a container. So the question is the RTSP server really streaming MP4 (which I doubt but it might) or maybe you have confused MP4 with H.264.
Chrome and Firefox both accept live video streams in the fragmented MP4 and WebM (which is irrelevant in this case) video containers. So if you really already have MP4 payload you can simply unpack it from the RTSP stream and forward to the browser. If you have H.264 you will have to perform muxing of the raw H.264 video stream into an MP4 container together with the audio (I am not sure if G711 is supported by browsers, I doubt it so audio might need to be transcoded). The free option is to setup FFmpeg to transcode rtsp to fragmented MP4 (there are lots of examples for this, just Google) or if you are looking for a commercial product our company has just released an video surveillance product that can offer HTML5 compatible live streaming from RTSP cameras. If you have any interest in the commercial product leave a comment.

createjs SoundJS plays mono sound instead of stereo

I use createjs.Sound to play short sound for my project. I wasn't able to use .mp3 format file and converted it to .ogg format. .ogg is playable, but sound is mono channel (I hear only in one side of headset). When I tried to play same file with VLC player, it sounds stereo channel (same file). I understood that have no problem with conversion of file and problem may be in configuration of SoundJS.
Can anyone advice how to configure SoundJS to play stereo channel audio?
There was a bug in a version of SoundJS - maybe it's because of that (depends on the version you are using...). Check the SoundJS-Github page for further information: https://github.com/CreateJS/SoundJS/issues/182
You can also try to change the pan property: http://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html#property_pan

javascript html5 stream player

I'am looking for some javascript player that could play hds or rtmp stream. Can't find it still.
We have a wowza, that is sending to end users a video stream in rtmp, and it is being played with Flowplayer. Now people want to watch this stream on iPad/Android devices. We have succesfully played it on Android 4.0 tablet because I've installed a flash player there. It plays right in the browser. But I cannot find similiar player for iPad. I heared that it does not exist. So the best solution would be some kind of JavaScript player.
You won't be able to play an RTMP stream on a plain webpage in iOS. HDS appears to be closely tied to Flash Player, so you might not be able to use it either, but given that it has HTTP in its name, it might be usable.
If you have some video that you stream the normal way, just use the video tag:
<video width="800" height="600" src="some-video.mp4">
Your browser does not support HTML5 video. Sorry.
</video>
If your video is available in multiple formats, you can drop the src attribute on the video element and instead have multiple source elements with src and type attributes.
If your web server is configured correctly, video can be streamed this way.

Flowplayer HTML5 Video Not Found

I have flowplayer running on a page in a slight variation of the playlist demo on their site, and for the most part it seems okay.
However, when I pause the video and switch to another video in the playlist on Chrome, once in a while, it will say HTML5 video not found (it will list the current video, not the one selected).
This will proceed to break the player and the page, forcing a refresh. The message also seems to show up on page refresh sometimes, but that doesn't matter much since it will be reloaded.
I am not sure what is wrong, but I have two theories.
1) MP4 file not streamable
-possible but unlikely considering I can jump around the video easily
2) Timeout from S3
-maybe, but I don't see any errors.
Has anyone seen this/know how to debug it?
The first thing to do would be to test this in another browser. If it works ok then it will be a video compatibility issue with the browser.
Mozilla has a very good article on Media formats supported. In it it states:
The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.
For the best cross browser support you really need two video formats MP4 and WebM

Categories