Sanderlings video

When I read the news I see a lot of articles that have what appears to be videos playing in them like the following…

https://www.nytimes.com/2019/09/19/science/bird-populations-america-canada.html

How exactly do you create an end result like this?

These types of videos almost look like they were done with Flash, but I’m pretty sure no one uses Flash anymore due to lack of support and security issues. These videos also almost look like animated gifs in that they play with no need to use a video client or press “play” and there is no downloading - at least on my computer - they videos simply play as soon as you load the web page.

I have read articles where they have videos of the subject of the article just standing there smiling and blinking at you, and it is amazing for much more “real” the article feels when you are looking at what seems to be a real person looking back at you!!

My HTML and CSS and web development skills are quite dated, and I would love to learn how to do more hip and modern types of things like this.

Here is hoping I can learn to do such things here on SitePoint! :grin:

This is made by The HTML <video> Element

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
1 Like

You’re telling me that “video” of the birds on the shore is an actual video and not something life Flash or an animated GIF?

That’s hard to believe since it plays automatically with no player and the page loads instantly.

That’s right! It’s a video file (mp4) with the loop and autoplay option.

Hi there UpstateLeafPeeper,

here is the basic code for a muted video…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Amuted video</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    font-size: 1.25em;
    color: #555;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

video {
    display: block;
    width: 100%;
    max-width: 64em;
    height: auto;
    margin: 1em auto;
    border: 1px solid #999;
 }
</style>

</head>
<body>

 <h1>a muted video</h1>

 <video  muted loop autoplay>
  <source src="https://vp.nyt.com/video/2019/09/18/82852_1_19SCI-MATTER-BIRDS-sanderling_wg_1080p.mp4"  type="video/mp4">
 </video>

</body>
</html>

coothead

3 Likes

@coothead,

How did you get the link to the video?

What kind of HTML and CSS are you using?

How does the browser know to start playing the video automatically?

And maybe most confusing…

What would I have to do to record such a video and make it usable like the link that I posted above? (My experience with videos is that there are typically large files that were slow to download and slow to play and often not compatible with different OS’s and browsers and plug-ins.)

What impresses me most about examples like the NYT link above, is the “ease and simplicity” of viewing a video on a web page without having to do any work as an end user!

Hi there UpstateLeafPeeper,

  1. I viewed the “Source Code” of the link which you provbided.
  2. I am using HTML5 and CSS2 and CSS3 where appropriate.
  3. The Browser renders the “autoplay” attribute of the video attribute.
  4. Put this…
    https://vp.nyt.com/video/2019/09/18/82852_1_19SCI-MATTER-BIRDS-sanderling_wg_1080p.mp4
    …in the address bar of your browser, click “Enter”, then right click
    on the video followed by left click on “Save Video As”. You will then
    be the the proud possessor of the 7.02MB video.

If you actually test the code that I posted, you will find that it behaves
in exactly the same way as the one in your link, if not better. :smiley:

coothead

1 Like

@coothead,

  1. I’m surprise that finding a link to the actual video was so easy, if even possible. Don’t most websites like the NYT usually make it impossible to find resources?

  2. Are you saying that browsers are automatically set to “autoplay” embedded page videos?

Is there a way user could override that? And if so, does that mean users could break your webpage design?

Or did you mean some attribute of the video file itself makes the browser play the video automatically?

Also, what makes it run again and again without doing anything?

What would it take to create such a nice looking video that is so small?

Would that require thousands of dollars in filming equipment and software to edit the video file afterwards, or could that scene above with the birds been done on something like an iPhone?

(Whenever I have tried making videos on my iPhone, the files seemed very large for considering how sort they were.)

Hi there UpstateLeafPeeper,

it was very simple to find, this is the method that I used with Firefox…

  1. opened the link that you provided
  2. clicked “View Page Source”
    3.clicked edit
    4 clicked “Find in this Page”
  3. entered “<video” in the box
  4. got this on line 131…
  5. <video src="https://vp.nyt.com/video/2019/09/18/82852_1_19SCI-MATTER-BIRDS-sanderling_wg_1080p.mp4" class="css-wi1myj" muted="" loop="" autoplay="" playsinline=""></video>

Similar procedures in other browsers will produce a similar result. :winky:

Browsers are not automatically set to “autoplay” videos

It is set in the HTML…

<video  controls autoplay muted  loop>

Note:- “autoplay” is now dependent on “muted” being set and may
also need “controls” to be set for mobile device display.

The “loop” attribute makes it “run again and again without doing anything

Video creation has never been my concern so I cannot help you with that. :unhappy:

Video editing, though, should not be overly expensive…

video editing software

coothead

1 Like

Do all sites use the <video tag? And is that HTML5?

Okay, I didn’t see that code in your example above. I get how it works now! :slight_smile:

Thanks!

I think I might make a webpage and use that video and run it like a desktop.

Very relaxing video!

If you use this basic code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>birds</title>

<style media="screen">
video {
    display: block;
    width: 100%;
    max-width: 40em
    height: auto;
    margin: auto
 }
</style>
</head>
<body>

 <video  muted loop autoplay controls>
  <source src="https://vp.nyt.com/video/2019/09/18/82852_1_19SCI-MATTER-BIRDS-sanderling_wg_1080p.mp4"  type="video/mp4">
 </video>

</body>
</html>

…and then click on the “Fullscreen” icon to the bottom right
of the video it will fill your screen.:biggrin:

if you would rather not hot link the video, then you get your
very own copy here…

https://www.coothead.co.uk/videos/sanderling.zip

coothead

1 Like

How did you get a copy of the video for yourself?

This will work for videos that are displayed using the
HTML5 video element, as is the “New York Times”
link in your original post and is actually easier than
finding it’s source code…

  1. Open the NYT link.
  2. Right click anywhere on the video.
  3. Left click “Save Video As…”
  4. This will open a dialogue box…
  5. Select your desired location for the
  6. Rename the file, if you wish.
  7. Click “Save”.
  8. Go to the selected location to check your handiwork.
  9. Have a beverage. :biggrin:

Others videos, though, may require different or even
nefarious means. :taped:

coothead

1 Like

@coothead,

It looks like for once things have gotten easier?!

In the past I recall it being super-duper complicated - if not impossible - to be able to save a video you saw online.

I guess if the video is actually a video file and the site uses HTML5, you are saying it is as simple as a right-click.

I’m also guessing, though, that there are lots of places where capturing a video is much more complicated, right?

As far as this thread is concerned, I was just interested in how the NYT made that really cool web page, because I would like to learn how to do that. (Just love those little birds!!) :slight_smile:

Do you think that most web pages which have an autoplay video like the page we are discussing use such a simple technique?

For once, it feels like it is 1995 again! :+1:

Well you now know how to do that :biggrin:

I can’t really comment on that. :unhappy:

The NYT video is a straight forward up font video.
Other sites may use them as backgrounds or some
other arty-farty device to make up for a lack of real
content.

What you need to do, is visit sites with video content
and see if you can locate the HTML for the video(s)
and try to reproduce it locally on your pc.

If you have a site that causes difficulties, give it to me
and I will attempt to capture it and if successful explain
the procedures employed.

coothead

1 Like

@coothead,

Thanks for all of the effort in helping me capture those little birds!! :smiley:

Okay, time to get back to work on my website and doing more basic HTML and CSS things!

(I’m sure I’ll be back with some more dumb questions!)

I don’t believe that there are any such things as dumb questions. :unhappy:

Having said that, I do believe that there are a multitude of dumb
answers given to many questions that are asked. :biggrin:

coothead

3 Likes

[rant]
The joys of sifting through the wheat from the chaff!

Once upon a time it was expensive, time consuming, tedious, required knowledge, etc to produce written material and discouraged frivolous authors from producing dross. Virtually everything in print was to be respected because a considerable effort was involved in producing the publication.

Today it is so much easier to quickly voice an opinion without even taking the slightest effort to think!
[/rant]

4 Likes

Excellent [rant] [/rant] contents. :rofl:

coothead

3 Likes

Yep, I’ve been saying that for years!!

Printed material along with an editor, whereas online, any prima donna can post drivel.

1 Like