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…
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.
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.
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.
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!
I have a problem to use the video in Hype project, please check the screenshot:
or, you might like check the issue at:
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.
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="avc1.42E01E, mp4a.40.2"" 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 <video> element.</p>
> </video>
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?
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:Screenshot by Lightshot
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.
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).
