Blog

Video file size interfering with playback

Sep 5th, 2013 by Max Tokman

Here's a common scenario - large video file uploaded to the site takes forever to load and might begin playing only after fully loaded.  Is there anything we can do to make playback  instanteneous?"

Every video file, besides having audio and video track, contains codec information on how to decode that video and audio data that's compressed to make final file size smaller. In H264 files (mov, mp4, etc.) that information is located in "moov atom".  "Moov atom" can be placed at the beginning or end of the file, depending on the type of encoding tool used.  If "moov atom" is placed at the end of the file, entire file has to be downloaded prior to being decoded and played; conversely, if "moov atom" is at the beginning of the file, video player knows right away exactly which codec to use and begins playback without waiting for complete download. 

Incorrectly placed "moov atom" can be moved to beginning of the file using qt-faststart.exe utility.

Command: qt-faststart [SOURCES_FILES] [NEW_FILES]

There are also much simpler situations, with oversized and super-high quality video playing in much smaller video player, but that's the easy part - you just have to find an acceptable compromise between final video quality and resulting file size before publishing.

Categories:

wordpressSEOweb designDrupalWeb DevelopmentADAHTML5productionresponsive designcompliancesecurityCSSPhotoshopdesignTestingFlashtoolsproduction tipsgoogletypographyGoogle Analyticsmarketingbeta testingautomationharness-bbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Long TailabletWebOSAndroidtabletsmobile devicesclientcommunicationimage size cloudtechnologyPDFresponsive statebreakpointimage compressionInteraction Metricsinstant video playback solutionvideo sizeInternet Explorer 83rd partyAdobe Edge ReflowawardsoftwarehostBacklinksAdvertisingapp lifespanmobile app challengeweb colorsgammacodecvideo playbackJSONRGBWindows XP LinkedInParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Cmicrosoft’s project natalsony playstationnintendo wiiaugmented reality3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingFacebookdudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityupdatevulnerabilityCKEditorCVE-2014-0224integrationprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommerceVideos and animations

Nov 22nd, 2013 by Max Tokman

Our approach to frameworks is that there's a tool for every job. In case of WordPress, it is a very good solution for very simple sites based on an existing theme, with functionality and layout requirements not exceeding theme's original capabilities. It works particularly well for blogs and small informati...

Jul 19th, 2013 by Max Tokman

iPad screens are 2048-by-1536 resolution at 264 pixels per inch (ppi). However, this cannot be used as usable area for entire screen, as the browser navigation takes 152 pixels on the top. Below are Photoshop templates that can be used to prepare your designs to be exact fit on iPad screen. iPad ...