5

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
Improve this question
8
  • 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
    Nov 7, 2015 at 14:53
  • 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
    Nov 7, 2015 at 15:42
  • 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
    Nov 7, 2015 at 15:51
  • Can you link to your and Apple's videos?
    – Gyan
    Nov 7, 2015 at 15:54
  • @Mulvya I added the links.
    – gang
    Nov 7, 2015 at 17:11

1 Answer 1

Reset to default
1

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.

Improve this answer
11
  • @gang Did this solve your problem? I tried this but am still stuck with a slow scrub :-(
    – bennlich
    May 18, 2016 at 23:29
  • Show the full console output of the command you ran. You can upload it to pastebin or the like.
    – Gyan
    May 19, 2016 at 5:21
  • @bennlich yes this solved my problem.
    – gang
    May 19, 2016 at 7:40
  • @Mulvya thar she blows: pastebin.com/tiSDPAVZ
    – bennlich
    May 19, 2016 at 21:43
  • 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
    May 20, 2016 at 5:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.