Thread: Streaming

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2010
    Posts
    25
    Rep Power
    0

    Streaming


    I have a site (Wordpress w/ Divi Theme) that is currently has a 5-slide slider with video backgrounds. The backgrounds are stored locally (Divi does not yet support using a streaming source such as YouTube or Vimeo for video backgrounds).

    The video's are HD, short (5 sec) and rendered with high compression to the point of not losing image quality. They average about 25MB each.

    The target user of this website the vast majority will have decent Internet download speed (probably at least 15mbit/sec). We have tested the slider load using 12mbit/s connection on a couple different PCs and browsers and there is only maybe 2 sec delay when page loads for first video to play. Because all videos are local, the transition to next slide with separate video file for video background is instant/seamless.

    So what is the problem then?

    There have been a few subsequent tests that show that transition is not 100% reliable. Sometimes video load can be delayed and then if you get to the next slide before video has loaded, the background is black. Granted this is a minority of cases but obviously it is preferable to design for 95% + of user scenarioes. I am guessing we are more like usable for 75-80% user scenarios which is still good as that 20-25% it is not good for is probably not our target user with poor internet connection or very old PC.

    We still would like to improve.

    So we loaded Revolution Slider plugin. We have found that unfortunately using different Vimeo stream video clips for background instead of local video file there is a brief black screen between transitions when changing streams that is not the case when loading local files. However loading local files adds 125MB of extra files to load for page load to be complete and in some cases creates issues for minority of users as mentioned above.

    So I am wanting opinion/input on best solution give my detailed explanation:

    1) Leave as is with five 25MB, correction, actually 4-5MB local video files to load since it is find for majority of target users

    2) Merge 5 videos into one video and use that as base background of slider and the slides are only text overlay on top of one Vimeo video instead of 5 videos. The issue here is that text on sliders is timed to video background seen so text may be out of sync with scene. Putting text inside video file loses text SEO value. This is why we do it this way.

    Seems like all websites with video background are not using it with slider and this is why they do not face these issues.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,248
    Rep Power
    4150
    Sounds to me like you just need to compress your videos better. 25MB for a 5 second clip seems insane. I can compress a 10-second clip from the Thor: Ragnarok blu-ray with no perceptible (to me anyway) quality loss down to 9.5MB. 7.5MB if a drop the audio and 6.5MB if I drop the resolution to 720p.

    Do you need HD resolution? If your videos will only be playing in a small area of the site then keeping them in full HD is pointless, reduce their resolution to closer to the actual playing size.

    If you're using HTML5 <video> tags to play the videos, there are various media events you could tie into to know when the videos are loaded and use that to control your slider. You could probably also use them to sync up a single video with your slider if you wanted to take that approach.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2010
    Posts
    25
    Rep Power
    0
    Oops, I was looking at the wrong set of files that I encoded at the HQ setting. The ones I'm actually using are average around 4-5MB in size. Totally forgot I created two sets of files. Believe me I experimented to get it to the lowest size while still looking good.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2010
    Posts
    25
    Rep Power
    0
    Also, the slider has the option to upload .webm format videos too for browsers that support the format (which most do these days.) Those are about 40% the mp4's. I've got it pretty darn optimized.

IMN logo majestic logo threadwatch logo seochat tools logo