Realtree

From the to-do list: Dev

✔ homepage video not playing on ipad air (Completed by Justin Bernard on August 17, 2015)

Comments

Justin Bernard on August 13, 2015:

see if thats playing for you on phone/etc

may need to hunt around and see if can find out why it wouldnt be working on ipad/etc.  works fine for me on desktop resized small

Taylor Bernard on August 13, 2015:

cant tell. its doing what he screenshotted.  not scaling it down and only seeing a corner offset.

doing that on the bg image with the shoe too. not scaling down for smaller size.

Taylor Bernard on August 14, 2015:

https://github.com/gka/canvid

Justin Bernard on August 14, 2015:

uses sprites you convert out of vids, be way too big for as long as we have

Taylor Bernard on August 14, 2015:

"

To solve the autoplay issue on iOS, do not use the videojs options to autoplay the video.

In other words, this will not work:

<video id="my-video-id" autoplay></video>

Neither will this:

videojs('my-video-id', {
    "autoplay": true
});

Instead wait for the video object to load and then trigger the play action:

videojs('my-video-id').ready(function() {
    this.play();
});

Taylor Bernard on August 14, 2015:

http://www.andy-howard.com/recreate-bbc-iplayer/index.html

Taylor Bernard on August 14, 2015:

any luck with any of those links. heres another trick to start the video autoplay.

<script type="text/javascript">
  function startVideo(){
    // make a variable containing your video for ease of use later in
case you want to expand your script and do all sorts of crazy stuff
with it
    var myVideo = document.getElementById('yourVideo');
    // check to see if the nice video players have started playing the
video already
    if ((myVideo.playing) || (myVideo.currentTime > 0)) {
      // hooray, video is already playing
    } else {
      myVideo.play();
    }
  // wait for the page to complete loading - that's just the elements
that make the page, not the entire video
  window.document.body.onload = startVideo;
</script>

Justin Bernard on August 16, 2015:

holy.  freaking.  crap.

ive spent who knows how many hours on this.  no solutions work.  the 'solutions' usually involve putting a button on page, so that when user clicks it, it makes the vid start

so then i started thinking how in the world is that realtree max5 site playing video on my ipad.  like i HAD to be missing something

and i was...

if (!($('html.touch').length) && !($('html.android').length)) {
            	$mastheadBG.css({
                	'background': 'url(/sites/all/modules/custom/max5/max5/img/1_intro/masthead-med.jpg) no-repeat top right'
            	});
                $('<video preload="" autoplay="" muted="" loop="" poster=""> \
                        <source src="/sites/all/modules/custom/max5/max5/media/video/masthead_med/masthead_med.mp4" type="video/mp4"> \
                        <source src="/sites/all/modules/custom/max5/max5/media/video/masthead_med/masthead_med.ogg" type="video/ogg"> \
                        <source src="/sites/all/modules/custom/max5/max5/media/video/masthead_med/masthead_med.webm" type="video/webm"> \
                    </video>').appendTo($.sec.section1);
            } else {
            	$mastheadBG.css({
                	'background': 'url(/sites/all/modules/custom/max5/max5/img/1_intro/masthead-small.gif) no-repeat top left'
            	});
            }

 
i kept staring at the code, it looked like a conditional where if its a touch device (if html.touch), it showed just a bg image.  but that couldn't be right, because it was showing video on my ipad.

but. it. wasn't.



son of a.  totally missed it. they made a freaking gif.

here what i need from you as soon as you can.  lets do an edit of the video, just showing the first 2-3 shots of the guys on the halfpipe.  the widest possibly need it is ipad res which is like 2048, but lets half that and see what size the gifs are.  so like a 1024 wide image.  see if AE/etc has a setting to output a gif, and lets just see how big it is..

thx

Justin Bernard on August 16, 2015:

lolz

apparently 10fps is max rate for safari/ipad gifs

http://www.markdubois.info/weblog/2014/02/after-effects-animated-gif/

'flash is dead'

'flash is so stupid'

total joke, the stuff we having to do to do what flash could do over a decade ago.  apple literally screwed up the entire internet back 10yrs.

Taylor Bernard on August 16, 2015:

are you sure you want to do gif? gif has nasty color sampling you are forced to go with.

if were going to do sequence what about that jpg canvas image sequencer i linked earlier? same concept just jpg instead of gif

Taylor Bernard on August 16, 2015:

that gif animation above...thats the one they are stretching to 2048px wide on ipad? that size?

Justin Bernard on August 16, 2015:

Yep... Makes no sense...

Taylor Bernard on August 16, 2015:

so it looks like a bunch of pixels moving at 10fps?

Justin Bernard on August 16, 2015:

Looks rough, surprisingly not worse

Taylor Bernard on August 16, 2015:

using 10fps
reducing size from 1920 1080 down to 640 360
cut it to about 14sec video length
color is horrible and file size is 10mb

Taylor Bernard on August 16, 2015:

http://gka.github.io/canvid/

showing a gif they made 5mb and the sprite 700k.

also its jpg so color is good.
already have an image sequence made. cant figure out how to use that imagemagick software command line to stitch it. dont even think theres a osx version

Justin Bernard on August 16, 2015:

link me the gif

may can do soemthing like this on jpgs
http://css.spritegen.com/

Justin Bernard on August 16, 2015:

also, lets try to cut it down way more less than 14 secs, thats a long vid for that placement

Taylor Bernard on August 16, 2015:

think we can work with this

http://cloud.fleeangrybear.com/image/2k0G2e2k2R0b

Justin Bernard on August 16, 2015:

pass me that gif too plz

Justin Bernard on August 16, 2015:

be seeing if you can get that sprite to play

Taylor Bernard on August 16, 2015:

149 frames
360x203px

Taylor Bernard on August 16, 2015:

gif is junk. color on skintones is real real bad.

Taylor Bernard on August 16, 2015:

http://cloud.fleeangrybear.com/image/462j2z093l1A

Justin Bernard on August 16, 2015:

gif looks bad but i know i can get it plugged in super easy, so its my fallback just in case canvas switching is too time consuming

Justin Bernard on August 16, 2015:

see if you can get sprite to play fullscreen, ill be working on the other, thx

Taylor Bernard on August 16, 2015:

"
tiny library for playing video on canvas elements"

think i have to have the canvas lib installed?

Justin Bernard on August 16, 2015:

canvas is built into new browsers


should just be the canvid lib plugin


Taylor Bernard on August 16, 2015:

http://client.fleeangrybear.com/realtree/sequence/index.html


using his example.js code. still has a bunch of his controls in there were not using. so dont know how to clean it up without messing somtehing up. or if it will even matter to have those unused vars in there

Justin Bernard on August 16, 2015:

sorry, literally fell asleep on computer for an hour (up late working last night and up early this morning)

seeing if can figure out how to plug it in now...

Taylor Bernard on August 17, 2015:

here are some other not as popular bg video players. my guess is they are loosely based off the bigvideo one.

https://github.com/stefanerickson/covervid/
http://vodkabears.github.io/vide/
https://github.com/georgepaterson/jquery-videobackground
http://www.seanmccambridge.com/tubular/

Justin Bernard on August 17, 2015:

cool thx

working on a way to use your penrose deal right now, since it works on all but mobile...

Taylor Bernard on August 17, 2015:

if canvid is based off canvas js theres got to be a way to make it responsive right

Justin Bernard on August 17, 2015:

possibly

focus on that now, see if you can get that jpg canvas test to fullscreen

i couldnt figure out how to do it anyway other than to a set dimension

Taylor Bernard on August 17, 2015:

how are they auto scaling a small gif on the other one to full screen?

Justin Bernard on August 17, 2015:


super easy, i just treated it as a bg image

#home #mobile_video {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url('../img/skate_bg_mobile.gif') no-repeat center center;
    background-size: cover;
    z-index: -150;
  }

Taylor Bernard on August 17, 2015:

what about this...

browser detect. then use something like jquery load. to load content from another html file. can even specify the div to load into the parent div.
no way it could load in the bg then right.

http://jquery.thewikies.com/browser/

http://api.jquery.com/load/

Taylor Bernard on August 17, 2015:

hmm.. supposedly with the jquery .load function it strips out any js.

what about this one. best reply. pjax

http://stackoverflow.com/questions/14735762/load-html-page-dynamically-into-div-with-jquery

Justin Bernard on October 9, 2015:

i think this is what had things all messed up

https://github.com/Modernizr/Modernizr/issues/1225

modernizr detects mac firefox as having touch events...

Justin Bernard on October 9, 2015:

got it working. was a stupid paramter causing firefox to fail as well
   
had this orig.  works fine all browsers except firefox
// var BV = new $.BigVideo({container: $('#bg_video'), forceAutoplay:isTouch, doLoop:true, useFlashForFirefox:false});

for some reason it doesnt like the container being set, did this and its fine:

var BV = new $.BigVideo({ forceAutoplay:isTouch, doLoop:true, useFlashForFirefox:false });

those kind of things suck, as its just something buggy with their plugin.  container: is supposed to be a property they have to work with...