Encode video for html5 and javascript controlled playback 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
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.