Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-18T23:29:41.687Z
Answers.Text: @gang Did this solve your problem? I tried this but am still stuck with a slow scrub :-(
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-19T05:21:11.273Z
Answers.Text: Show the full console output of the command you ran. You can upload it to pastebin or the like.
Answers.UserDisplayName: Gyan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-19T07:40:27.330Z
Answers.Text: @bennlich yes this solved my problem.
Answers.UserDisplayName: gang
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-19T21:43:56.503Z
Answers.Text: @Mulvya thar she blows: http://pastebin.com/tiSDPAVZ
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T05:20:13.340Z
Answers.Text: 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.
Answers.UserDisplayName: Gyan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T19:30:51.393Z
Answers.Text: 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?
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T20:03:52.423Z
Answers.Text: 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?
Answers.UserDisplayName: Gyan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T21:45:40.537Z
Answers.Text: 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.
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-24T17:18:03.167Z
Answers.Text: @Mulvya Also wondering--how does `tbr` affect seeking speed?
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-24T17:24:08.270Z
Answers.Text: Unless if's very high, it shouldn't. Bitrate matters more.
Answers.UserDisplayName: Gyan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-24T22:07:42.643Z
Answers.Text: 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.
Answers.UserDisplayName: bennlich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-07T17:50:41.873Z
Answers.LastActivityDate: 2015-11-07T17:50:41.873Z
Answers.UserDisplayName: Gyan
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T14:53:32.140Z
Comments.Text: 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"
Comments.UserDisplayName: Gyan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T15:42:33.353Z
Comments.Text: 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
Comments.UserDisplayName: MoritzLost
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T15:51:40.213Z
Comments.Text: 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.
Comments.UserDisplayName: gang
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T15:54:03.430Z
Comments.Text: Can you link to your and Apple's videos?
Comments.UserDisplayName: Gyan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T17:11:10.063Z
Comments.Text: @Mulvya I added the links.
Comments.UserDisplayName: gang
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T17:15:13.423Z
Comments.Text: 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.
Comments.UserDisplayName: Gyan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T17:23:04.367Z
Comments.Text: 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?
Comments.UserDisplayName: gang
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-07T17:46:01.370Z
Comments.Text: You could add "-x264opts keyint=3:min-keyint=2" to further mimic the Apple file.
Comments.UserDisplayName: Gyan
Tags: <video><encoding><webvideos>
Title: Encode video for html5 and javascript controlled playback
UserDisplayName: gang
ThreadText: # 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.  
  
  ---
  
  