A lot of mp4 videos won't play... encoding type?

[ghost]

• WebTorrent version: Version 0.13.1 (0.96.4)
• Node.js version: ?
• Browser name/version (if using WebTorrent in the browser): Firefox 48.0.2

Hi there. I've been testing WebTorrent on my own site and it seems like there's a lot of videos that simply won't play. You have to literally re-encode them with handbrake and adobe premiere in order to render them playable on any WebTorrent browser app.

Say this Big Buck Bunny video for example .. I've even tested it on Instant.io, and it still doesn't work. It'll work on WebTorrent.desktop, but not on browsers. There's quite a few seeders there, too:

magnet:?xt=urn:btih:88594aaacbde40ef3e2510c47374ec0aa396c08e&dn=bbb_sunflower_1080p_30fps_normal.mp4&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&tr=udp%3A%2F%2Ftracker.publicbt.com%3A80%2Fannounce&ws=http%3A%2F%2Fdistribution.bbb3d.renderfarming.net%2Fvideo%2Fmp4%2Fbbb_sunflower_1080p_30fps_normal.mp4

What would be the ideal Video and audio codec settings for webtorrent at the moment?
Much appreciate any input..
Thanks
Kopy Kate

[dcposch]

K here's the codec info for the Big Buck Bunny video you linked to:

According the browser compatibility chart (linked below), this should work in all major browsers both on desktop and on mobile. If works when I open the file in Chrome directly, and it should work in a <video> tag Chrome, Firefox, and Safari.

I don't know why this doesn't work using webtorrent.js / instant.io

Maybe something dumb involving the blob URL mime type. @feross

Video and audio codec settings for webtorrent at the moment?

If you want it to work in the browser (not just WebTorrent Desktop), check out this compatibility chart:

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

[dcposch]

CC @jhiesey

[feross]

@dcposch It works when I open the file in Chrome directly

This unfortunately isn't sufficient to figure out if a file will stream over WebTorrent. To play back video in the <video> tag using incomplete video data from JavaScript we have to use the Media Source API. In Chrome, this actually uses a completely different code path -- so the same video might not play. It actually also supports a lot less formats. Look into the "Media Source Extensions" spec to learn more.

Eventually, I think we can improve this using new web standards. If we just use a normal <video src=""> tag to link to an invalid, but well-defined http source, then we can intercept the requests before Chrome makes them using a Service Worker. Service Workers let you proxy any request the browser makes and return your own response in it's place. This way, we get the standard code path for video decoding, which supports a lot more formats, and we can get rid of the complex code for media container (mp4) parsing and repackaging that happens in the videostream package by @jhiesey.

[feross]

@jhiesey -- what is the status of streams in Service Workers? Can you return a streaming response yet? If so, we can build this right now!

[Simplici]

I have the same problem.
I have four mp4 videos, two works with steaming(file.renderTo()), the others don't. But if create a blob from file and then bind it to the video tag, then all of them could work. It is really wired.

The streaming code that works for two of the four:

    var download = function(torrentId, videoElement) {
        console.log('begin download');
        _newClient().add(torrentId, function(torrent){
            torrent.on('warning', console.log);
            torrent.on('error', console.log);
            var file = torrent.files[0];
            console.log('file ready');
            file.renderTo(videoElement, function(err, element){});
        });
    };

The no-streaming code(need to download the whole file before be able to play) that works for all of the four:

var download = function(torrentId, videoElemenet) {
        _newClient().add(torrentId, function(torrent){
            torrent.on('warning', console.log)
            torrent.on('error', console.log)
            var file = torrent.files[0];
            file.getBlobURL(function(err, url){
                $timeout(function(){
                    videoElemenet.src = url;
                })

            });
        });
    };

I have compared the four codec information of these four videos, the two that works with streaming are coded with H264 and AAC, while the two that do not work with streaming are coded only with H264.

This is really limited that only mp4 is supported and not all mp4 are supported.

Hope someone could improve this.

[DiegoRBaquero]

@Simplici The thing with the blob is that file is already fully downloaded. Streaming is a little different, metadata and headers of the videos have to be at the start so that the video is streamable.

[Simplici]

@DiegoRBaquero but how can I test if a video can be streamed? How can i modify the video file to make it steamable?

[pavram]

@Simplici Back in the dark-ages of the internet (~2008) I used to reprocess videos through mp4box to make them "streamable" this could be the kind of thing we are talking about. This isn't a full re-encode so it is relatively fast process. (and maintains the existing quality)

(My naive interpretation of the whole thing was; the mp4 spec allowed codec and other metadata to be stored at the end of the file; which obviously doesn't work for streaming files which download during playback. so mp4box would shuffle that information to the front of the file [or possibly multiple locations?]. as I say; naive interpretation!)

My google was: "mp4box streaming mp4" for further detail. There may be significantly better ways of doing the exact same thing (since I used to do this almost 10 years ago, there's likely better ways to go about it than mp4box), but the worst part of all of it is you can't really do it on files you have started to stream, but before playback.

This is something you would do to your own videos that you are hosting using some version of webtorrent.

[Simplici]

@pavram, i have investigated on this problem for quite long time.

The funny thing is that even after I put the meta data at the beginning of video files, not all files could be streamed. I have tried to use ffmpeg to do some comparison, nothing useful found.

[davidupx]

@Simplici, the same problem, I can not find an explanation for this...
Have you found a solution?

[feross]

@Simplici Back in the dark-ages of the internet (~2008) I used to reprocess videos through mp4box to make them "streamable" this could be the kind of thing we are talking about. This isn't a full re-encode so it is relatively fast process. (and maintains the existing quality)

This is correct.

There's an ffmpeg command that you can use to encode videos in a format that will always work with WebTorrent. See this comment: #1098 (comment)