<p>The Apple video uses a profile with fewer reference frames and also carries a streaming hint track.</p>

<p>The following ffmpeg command template should create a quick seeking MP4 file:</p>

<pre><code>ffmpeg -i input -c:v libx264 -profile:v baseline -x264opts keyint=3:min-keyint=2 -{other video encoding parameters} -{audio encoding parameters} -movflags +faststart+rtphint output.mp4
</code></pre>

<p>Given the profile and GOP sizes set, compression effiency won't be great.</p>

CC BY-SA 3.0
2016-05-18T23:29:41.687Z
@gang Did this solve your problem? I tried this but am still stuck with a slow scrub :-(
bennlich
CC BY-SA 3.0
2016-05-19T05:21:11.273Z
Show the full console output of the command you ran. You can upload it to pastebin or the like.
Gyan
CC BY-SA 3.0
2016-05-19T07:40:27.330Z
@bennlich yes this solved my problem.
gang
CC BY-SA 3.0
2016-05-19T21:43:56.503Z
@Mulvya thar she blows: http://pastebin.com/tiSDPAVZ
bennlich
CC BY-SA 3.0
2016-05-20T05:20:13.340Z
Add `-r 25`. What I can see is that you have a variable frame rate input with an incorrectly flagged FPS value stored in the container and that's leading FFmpeg to use very large timebase values.
Gyan
CC BY-SA 3.0
2016-05-20T19:30:51.393Z
No luck :-( New output: http://pastebin.com/e9aJpyF1
The very large timebase values you're referring to is what's reported as `tbn`? Also, where do you see the incorrectly flagged FPS stored in the container?
bennlich
CC BY-SA 3.0
2016-05-20T20:03:52.423Z
The `tbr` of your input - that's the stored or assumed framerate. `fps` shown by ffmpeg is total frames / duration. What are you testing the scrub in, and do you have a file that scrubs fast?
Gyan
CC BY-SA 3.0
2016-05-20T21:45:40.537Z
Here's the info on a file that scrubs very quickly: http://pastebin.com/z1WdEYAK. I'm scrubbing in an HTML5 video element, like here: http://codepen.io/gfschultheiss/pen/zvQmPz.
bennlich
CC BY-SA 3.0
2016-05-24T17:18:03.167Z
@Mulvya Also wondering--how does `tbr` affect seeking speed?
bennlich
CC BY-SA 3.0
2016-05-24T17:24:08.270Z
Unless if's very high, it shouldn't. Bitrate matters more.
Gyan
CC BY-SA 3.0
2016-05-24T22:07:42.643Z
Mmm k. Did you notice any clues in the dump from the quickly scrubbing file (http://pastebin.com/z1WdEYAK)? I'm not sure where to look next.
bennlich
CC BY-SA 3.0
2015-11-07T17:50:41.873Z
2015-11-07T17:50:41.873Z
Gyan
<p>I want to create something like Apples Mac Pro product page <a href="http://www.apple.com/de/mac-pro/" rel="nofollow">http://www.apple.com/de/mac-pro/</a> where html5 video playback is being controlled via javascript (by manually setting the currentTime attribute of the video). It works perfectly when I use their video but not at all with my own videos. How can I convert my videos so that they play back nicely?</p>

<p>Using ffmpeg I tried everything I could think of like</p>

<ul>
<li>removing the audio track</li>
<li>decreasing the videos dimensions</li>
<li>decreasing the framerate</li>
<li>setting the framerate to 30fps (like in apples video)</li>
<li>converting their video to jpgs and create a video from those frames (i thought maybe the color-spectrum made a difference (mainly black))</li>
<li>different options for quality (-crf [18-30] -preset [veryslow-veryfast])</li>
<li>decreasing the length of the video (apple’s video is 47s long)</li>
</ul>

<p>I also tried some different options of handbrake but nothing helped.</p>

<p><a href="http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4" rel="nofollow">http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4</a></p>

<pre><code>ffmpeg -i macpro_main_desktop.mp4 
</code></pre>

<p>shows:</p>

<pre><code>Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'macpro_main_desktop.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp42mp41
    creation_time   : 2013-10-16 22:55:31
  Duration: 00:00:47.03, start: 0.000000, bitrate: d kb/s
    Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1120x840, 2797 kb/s, 30 fps, 30 tbr, 30 tbn, 60 tbc (default)
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : Apple Video Media Handler
    Stream #0:1(eng): Data: none (rtp  / 0x20707472), 139 kb/s
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : hint media handler
</code></pre>

<p>here is an example of the videos I encoded via ffmpeg:</p>

<pre><code>Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video-720-main-30fps.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.15.102
  Duration: 00:05:00.49, start: 0.033333, bitrate: 420 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 284 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
</code></pre>

CC BY-SA 3.0
2015-11-07T14:53:32.140Z
I doubt the presence of an audio track or frame size or rate has anything to do with it. Try adding a hint track, like in the Apple video, so "-movflags faststart+rtphint"
Gyan
CC BY-SA 3.0
2015-11-07T15:42:33.353Z
Are you sure that the problem is not your HTML or Javasript code? Embedding videos in HTML5 is kinda tricky, especially if you want to control it using custom controls/Javascript
MoritzLost
CC BY-SA 3.0
2015-11-07T15:51:40.213Z
Hi. @Mulvya thanks for the hint with the hint track. It really helped but playback is still really slow. @ MoritzLost I am quite sure that the video is the problem because when I use apples video I can scrub through without any lag. The code is extremely simple atm. I just update the video's currentTime property on scroll.
gang
CC BY-SA 3.0
2015-11-07T15:54:03.430Z
Can you link to your and Apple's videos?
Gyan
CC BY-SA 3.0
2015-11-07T17:11:10.063Z
@Mulvya I added the links.
gang
CC BY-SA 3.0
2015-11-07T17:15:13.423Z
First change I would suggest is to encode in main or baseline profile, so try "-profile:v baseline" first. Maybe the fewer reference frames makes a difference.
Gyan
CC BY-SA 3.0
2015-11-07T17:23:04.367Z
Nice. It reacts much faster now. (At least in Chrome and Safari) `ffmpeg -i input.mp4 -profile:v baseline -movflags faststart+rtphint output.mp4`
Are there any more tweaks that could improve it even more?
gang
CC BY-SA 3.0
2015-11-07T17:46:01.370Z
You could add "-x264opts keyint=3:min-keyint=2" to further mimic the Apple file.
Gyan
<video><encoding><webvideos>
Encode video for html5 and javascript controlled playback
gang
# Encode video for html5 and javascript controlled playback

(Asked by: username_0 on 2015-11-07)

I want to create something like Apples Mac Pro product page http://www.apple.com/de/mac-pro/ where html5 video playback is being controlled via javascript (by manually setting the currentTime attribute of the video). It works perfectly when I use their video but not at all with my own videos. How can I convert my videos so that they play back nicely?
Using ffmpeg I tried everything I could think of like

removing the audio track
decreasing the videos dimensions
decreasing the framerate
setting the framerate to 30fps (like in apples video)
converting their video to jpgs and create a video from those frames (i thought maybe the color-spectrum made a difference (mainly black))
different options for quality (-crf [18-30] -preset [veryslow-veryfast])
decreasing the length of the video (apple’s video is 47s long)

I also tried some different options of handbrake but nothing helped.
http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4
ffmpeg -i macpro_main_desktop.mp4 

shows:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'macpro_main_desktop.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp42mp41
    creation_time   : 2013-10-16 22:55:31
  Duration: 00:00:47.03, start: 0.000000, bitrate: d kb/s
    Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1120x840, 2797 kb/s, 30 fps, 30 tbr, 30 tbn, 60 tbc (default)
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : Apple Video Media Handler
    Stream #0:1(eng): Data: none (rtp  / 0x20707472), 139 kb/s
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : hint media handler

here is an example of the videos I encoded via ffmpeg:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video-720-main-30fps.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.15.102
  Duration: 00:05:00.49, start: 0.033333, bitrate: 420 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 284 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler

**Tags:** video, encoding, webvideos

> **Comments:**
> **username_1**: I doubt the presence of an audio track or frame size or rate has anything to do with it. Try adding a hint track, like in the Apple video, so "-movflags faststart+rtphint"  
> **username_2**: Are you sure that the problem is not your HTML or Javasript code? Embedding videos in HTML5 is kinda tricky, especially if you want to control it using custom controls/Javascript  
> **username_0**: Hi. @Mulvya thanks for the hint with the hint track. It really helped but playback is still really slow. @ username_2 I am quite sure that the video is the problem because when I use apples video I can scrub through without any lag. The code is extremely simple atm. I just update the video's currentTime property on scroll.  
> **username_1**: Can you link to your and Apple's videos?  
> **username_0**: @Mulvya I added the links.  
> **username_1**: First change I would suggest is to encode in main or baseline profile, so try "-profile:v baseline" first. Maybe the fewer reference frames makes a difference.  
> **username_0**: Nice. It reacts much faster now. (At least in Chrome and Safari) `ffmpeg -i input.mp4 -profile:v baseline -movflags faststart+rtphint output.mp4` Are there any more tweaks that could improve it even more?  
> **username_1**: You could add "-x264opts keyint=3:min-keyint=2" to further mimic the Apple file.  

---

## 1 answers

### Answer by username_1 on 2015-11-07. Score: 1 | Accepted answer

The Apple video uses a profile with fewer reference frames and also carries a streaming hint track.
The following ffmpeg command template should create a quick seeking MP4 file:
ffmpeg -i input -c:v libx264 -profile:v baseline -x264opts keyint=3:min-keyint=2 -{other video encoding parameters} -{audio encoding parameters} -movflags +faststart+rtphint output.mp4

Given the profile and GOP sizes set, compression effiency won't be great.

> **Comments:**
> **username_3**: @username_0 Did this solve your problem? I tried this but am still stuck with a slow scrub :-(  
> **username_1**: Show the full console output of the command you ran. You can upload it to pastebin or the like.  
> **username_0**: @username_3 yes this solved my problem.  
> **username_3**: @Mulvya thar she blows: http://pastebin.com/tiSDPAVZ  
> **username_1**: Add `-r 25`. What I can see is that you have a variable frame rate input with an incorrectly flagged FPS value stored in the container and that's leading FFmpeg to use very large timebase values.  
> **username_3**: No luck :-( New output: http://pastebin.com/e9aJpyF1 The very large timebase values you're referring to is what's reported as `tbn`? Also, where do you see the incorrectly flagged FPS stored in the container?  
> **username_1**: The `tbr` of your input - that's the stored or assumed framerate. `fps` shown by ffmpeg is total frames / duration. What are you testing the scrub in, and do you have a file that scrubs fast?  
> **username_3**: Here's the info on a file that scrubs very quickly: http://pastebin.com/z1WdEYAK. I'm scrubbing in an HTML5 video element, like here: http://codepen.io/gfschultheiss/pen/zvQmPz.  
> **username_3**: @Mulvya Also wondering--how does `tbr` affect seeking speed?  
> **username_1**: Unless if's very high, it shouldn't. Bitrate matters more.  
> **username_3**: Mmm k. Did you notice any clues in the dump from the quickly scrubbing file (http://pastebin.com/z1WdEYAK)? I'm not sure where to look next.  

---

