Apple Aerial Video Screensavers On Your Website, Full Page


(elcalibano) #1

Hey party people, anyone with an Apple TV who loves those built in Apple Aerial Screensavers, Drone Footage lovers, just anyone who wants to put some video on your webpage, here’s some videos for you, and a template for displaying it full screen on your site. Check the inner html of the rectangle, and copy and paste whatever video you want in place of the video link already in there.

Why post these Apple screensavers? Because they’re available online, because they’re cool, and not everyone knows where to find them. Also, to thank the forum community for past and future help. I don’t know if there’s any rules about posting these on your own site, so…

Full Page Background Video.hype.zip (11.7 KB)

Greenland Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_GL_G004_C010_v03_6Mbps.mov

Greenland Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/plate_G002_C002_BG_t9_6M_HB_tag0.mov

Greenland Night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_GL_G010_C006_v08_6Mbps.mov

Dubai Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D001_C001_v03_6Mbps.mov

Dubai Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D002_C003_t9_6M_HB_tag0.mov

Dubai Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D001_C005_t9_6M_HB_tag0.mov

Dubai Day 4: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D008_C010_v04_6Mbps.mov

Dubai Night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D011_D009_SIGNCMP_v15_6Mbps.mov

Dubai Night 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_DB_D011_C010_v10_6Mbps.mov

Los Angeles Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_LA_A005_C009_v05_t9_6M.mov

Los Angeles Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_LA_A006_C008_t9_6M_HB_tag0.mov

Los Angeles Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_LA_A008_C004_ALT_v33_6Mbps.mov

Los Angeles Night:

Hong Kong Day:

Hong Kong Day 2:

Hong Kong Day 3:

Hong Kong Night:

China Day:

China Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_C007_C011_08244D_001_v01_6M_HB_tag0.mov

China Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_C007_C004_0824AJ_001_v01_6M_HB_tag0.mov

China Day 4: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b2-1.mov

China Day 5: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b5-1.mov

China Day 6: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b6-1.mov

Liwa Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_LW_L001_C006_t9_6M_tag0.mov

Hawaii Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b1-1.mov

Hawaii Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b2-2.mov

Hawaii Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b4-1.mov

Hawaii Day 4: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b7-1.mov

Hawaii Night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b6-2.mov

London Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b5-2.mov

London Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b6-3.mov

London Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b1-2.mov

London Night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b3-1.mov

New York City Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b1-3.mov

New York City Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b7-2.mov

New York night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b2-3.mov

San Francisco Day: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b3-3.mov

San Francisco Day 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b4-3.mov

San Francisco Day 3: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b8-2.mov

San Francisco Day 4: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b8-3.mov

San Francisco Day 5: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b9-3.mov

San Francisco Day 6: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b10-3.mov

San Francisco 7: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b2-4.mov

San Francisco Night: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b1-4.mov

San Francisco Night 2: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b5-3.mov

San Francisco: http://a1.phobos.apple.com/us/r1000/000/Features/atv/AutumnResources/videos/b6-4.mov


(elcalibano) #2

And now, updated with @DBear’s full screen button:

Full Screen Background Video.hype.zip (17.4 KB)


(Trey Yancy) #3

That’s very useful. Is there a way to create a loading indicator for the content?


(elcalibano) #4

I don’t actually know how to implement a loading indicator for iframe content (or a hype doc. with iframe content). Someone else might know. On my macbook laptop the video loads pretty fast, maybe instantly.

You can try a couple different things, exporting from my hype project file and uploading to your personal website and seeing if it loads faster, or download the video and upload it to your own website and then copy and paste the url from your website into the iframe. Those are just guesses, don’t know if they’d make any difference.


(Trey Yancy) #5

It would require a query of the video file for the video duration and file size, triggering the load, monitoring the amount of data loaded over a given time, doing the math, and generating art that resizes according to the sampled rate.

I don’t know how to get at the metadata for a video file and, when it comes to JS, I don’t have the chops to translate scripts from the language with which I’m most familiar.

It appears that the video has not been formatted for fast web streaming. I’ll test it with some video I have on Wistia.


(Trey Yancy) #6

Not sure how to adapt this for my streaming content, as the link I would use does not point at something with a file extension.


(elcalibano) #7

This is just one example. Here is some iframe code that points to a youtube video. Copy and paste it into the inner html of a rectangle, and adjust the parameters to your liking. It doesn’t have a .mov or other video extension. Add this < to the beginning and this > to the end.

<iframe allowfullscreen="" frameborder="0" height="400" width="600" src="https://youtube.com/embed/mNtZBcEN6jg?autoplay=1"></iframe>


(Mark Hunte) #8

Found that there is a Json file that lists all the videos if you do a google search.

Be aware that Apple may or may not be ok for you to use all of this for personal use but likely would not like it streamed outside of that. Also these links seem to be banding about on the web but not sure how they were obtained I.e delving into the atv software, which again would probably bring up licensing issues.

Saying that these are cool and there may very well be something somewhere describing their public use!


(Alex) #9

Hi

I note the line:
<video autoplay="" loop="" style="width: 100%; height: 100%; position:left">

is it helpful to achieve higher speed by adding [autobuffer=“autobuffer”] like the one below please?

<video autobuffer="autobuffer" autoplay="" loop="" style="width: 100%; height: 100%; position:left">

(Mark Hunte) #10

Have a read of this. ( Note it is a draft so do not know if this is live or not and not had time to check )

https://dev.w3.org/html5/pf-summary/video.html#attr-media-autobuffer


(Alex) #11

Hello,

I have a problem to use the video in Hype project, please check the screenshot:

or, you might like check the issue at:

https://www.lovcour.com/baomachenizm/

In local view mode, the video exactly display with the size of element, but there will be large gap if it is uploaded into wordpress, and I tried a lot of ways, but still failed.

Here is my setting:

and code lines:

<video id="desert" preload="none" loop="" muted="" playsinline="" style="heigth:920px; position:left">

Sorry, your browser does not support the <video> element.

Here is the my hype document, anyway to fix this issue please?

https://www.dropbox.com/s/p51i2otvux55sqn/bao_mechanizm.hype.zip?dl=0

Thanks


#12

This is mispelled, it should be:

height:920px;

Does that fix it?


(Alex) #13

Hi,

Thanks, I revise it, but it will look like this:


#14

Your video is in this ratio: 1920 x 1080 (1.777777)

The image behind it is in this ratio: 1380 x 920 (1.5).

So I think you need to match those up.


(Alex) #15

Hi @Daniel,

Thanks, I understand the ratio.

But, I set the video height to 920px, and that background image is 920px, also, it works properly in local view, but not work in wordpress, please check the screenshot for comparing:

what I am thinking is that the width should be auto enlarged if the height is set to 920, since I did not set width to that video, right?

> <video id="desert" preload="none" loop="" muted="" playsinline="" style="height:920px; position:left">
> <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" video="" src="https://s1.mzstatic.com/us/r1000/000/Features/atv/AutumnResources/videos/comp_LW_L001_C006_t9_6M_tag0.mov">
>   <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
> </video>

do you think I should set the width to be “auto”?


(Jonathan Deutsch) #16

If I look at the computed style for the video element, on the wordpress site it always 1380px, unless I make the page smaller. On the Hype preview, this size is looks like it is 1636 or 1840 (I’m unsure why two, but maybe I’m looking at something wrong). Maybe there’s some other rule in place. I couldn’t find one.

Regardless, why not just set the width/height to be 100% and 100% so it is always the same as the surrounding Hype element?


(Alex) #17

Thanks

There are two layouts in my hype document, one is for mobile, and another for PC.

Maybe the video from Apple is responsive too?

Sorry, I forget to let you know that, the reason why I set the Height to be 920 and not set to be 100% is that it will looks like this:http://prntscr.com/m4pz3w

that is just why I am trying to set the height to be 920, and I suppose the width would be enlarged automatically as ratio.

Thanks


(Jonathan Deutsch) #18

It may be easier just to resize the video to match the underlying element then? The wordpress environment you are in is probably setting something somewhere… unfortunately this is quite difficult to debug. (I don’t think it is a Hype-specific issue).


(Alex) #19

YEAH, simply enlarge it enough, and group it and hide the overflow, it will be display exactly within the element.

:sweat_smile: