Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTTP Header for Duration of a MP4 for HTML 5 video

Tags:

html

video

ffmpeg

I am trying to stream MP4 video as it is encoded from a webserver. I believe I used the appropriate flags, but it is not working correctly. When I download the video from my stream and open it with VLC, it properly shows the duration. Since a socket is not seekable, I assume it writes the metadata to end? My Chrome browser always shows 8 seconds duration. The first 8 seconds plays at the normal speed, but afterwards the pause button turns into play button and the video plays very fast, probably as fast as it is recieved. However the audio is played at normal speed. I tried document.getElementById('myVid').duration = 20000 but it is a readonly field.

I wonder, is there anyway to explicitly state the duration in HTTP headers or in any other way? I cannot find any documentation about it.

ffmpeg -i - -vcodec libx264 -acodec libvo_aacenc -ar 44100 -ac 2 -ab 128000 -f mp4 -movflags frag_keyframe+faststart pipe:1 -fflags +genpts -re -profile baseline -level 30 -preset fast

To close-voters, that thinks it is not programming related, I use it in my own server I coded, and I need to set the duration programatically via JavaScript or setting the HTTP header. I believe it may be related to both ffmpeg or http headers, that's why I posted it here.

app.get("/video/*", function(req,res){
    res.writeHead(200, {
        'Content-Type': 'video/mp4',
    });
    var dir = req.url.split("/").splice(2).join("/");
    var buf = new Buffer(dir, 'base64');
    var src = buf.toString();

    var Transcoder = require('stream-transcoder');
    var stream = fs.createReadStream(src);
    // I added my own flags to this module, they are at below:
    new Transcoder(stream)
        .videoCodec('libx264')
        .audioCodec("libvo_aacenc")
        .sampleRate(44100)
        .channels(2)
        .audioBitrate(128 * 1000)
        .format('mp4')
        .on('finish', function() {
            console.log("finished");
        })
        .stream().pipe(res);
});

exec function in that stream-transcoder module,

    a.push("-fflags");
    a.push("+genpts");
    a.push("-re");
    a.push("-profile");
    a.push("baseline");
    a.push("-level");
    a.push("30");
    a.push("-preset");
    a.push("fast");
    a.push("-strict");
    a.push("experimental");
    a.push("-frag_duration");
    a.push("" + 2 * (1000 * 1000));
    var child = spawn('ffmpeg', a, {
        cwd: os.tmpdir()
    });
like image 341
Mustafa Avatar asked Feb 06 '14 22:02

Mustafa


People also ask

How to handle range when embedding MP4 video in HTML?

When you embed MP4 video in HTML, Safari and iPhone require the Range request header to play your media content. You have to handle Range on the server-side. If the video is ranged your server must return status (206) with range headers correctly. You should choose the header sample status as 206.

How to insert an MP4 file in HTML 5?

There are two basic methods to insert MP4 into an HTML page, the <embed/> tag and insert a video file using a link. Just learn more details about the HTML 5 code as below. <embed src="example.mp4" autostart="false" height="600" width="800" /></embed>

What is the duration property of a video?

The duration property returns the length of a video, in seconds. Note: Different browsers return different values. In the example above, Internet Explorer, Firefox and Chrome returns "12.612". Safari returns "12.612000465393066", Opera 12 returns "12.585215419", while Opera 18 returns "12.62069". Note: This property is read-only.

Why MP4 video play in other browsers but not Safari?

MP4 Videos Play in Other Browsers, but Not Safari, Why? When you embed MP4 video in HTML, Safari and iPhone require the Range request header to play your media content. You have to handle Range on the server-side. If the video is ranged your server must return status (206) with range headers correctly.


1 Answers

I believe the X-Content-Duration header is what you need.

Mozilla documentation on X-Content-Duration*

* The documentation discusses the OGG format, but the principle applies to other video formats

like image 129
Tyler Eich Avatar answered Sep 22 '22 14:09

Tyler Eich