[no_toc]
Hi. This is our staff, Kawashima.

Over the last few years, we’ve seen a lot of boldly used corporate sites and landing pages for video content. You may have read this article somewhere when you saw a website that uses videos.

In fact, we’ve started displaying videos in the background of a non-sta website on our top page recently, and even if you access them from your smartphone, it will automatically play back the video when possible.
Since it is possible to automatically play videos on smartphones for a little more than one year, we have summarized the knowledge at the time of implementation for those looking for information in this article.
It would be great if you could help the directors who plan content and engineers who are looking for implementation examples.

Contents

- Summary

- Relation between Smartphone and Video Content
- the use of video content on a website.
- Benefits and Demerits of Adoption
- What should be considered when introducing background video

- concrete implementation method
- Implementation of Branching Processing Based on UserAgent Judgment
- YouTube IFrame Player API
- Some things that have not been introduced (modernizr.js and Network Information API)

- instead
- Thank you: the site that I used to refer to when implementing it.

Summary

Starting with safari for iOS10 and Chrome for Android53, videos can now be auto-played inline on smartphones as well, but the video needs to be muted.
In order to cover both autoplayable and unplayable users, we have implemented a combination of UserAgent judgments and the YouTube IFrame Player API.
It will be even easier to use if Network Information API is popular in the future, but at this time I think it's better to judge whether or not it has been introduced after taking into account the impact of low-speed line users such as under communication restrictions.

Relation between Smartphone and Video Content

Before explaining the implementation example, we will write about video content on smartphones and websites. If you want to read the specific implementation knowledge first, click here for a quick look. ）

the use of video content on a website.

Until a few years ago, video content was rarely used on websites as it was, and drawing videos using Flash, GIFs or canvas was common; the video contents were too large to play at the speed of the line at that time.
But the amount of video information is not comparable to text and still images, so as the average line speed increases, more videos are used on websites.
Reference: Basics and Applications of Landing Page Using Background Video

However, in the case of smartphones, the speed of the line varies; some users use Wi-Fi and others have low-speed lines under communication restrictions.
For this reason, the active use of video content and automatic playback are not so common on sites that browse from a smartphone; it is relatively recent that autoplaying videos on smartphones has become generally possible.
Nowadays, there are more users who browse websites on their smartphones than on PC.It is a great advantage if they can utilize video content even in smartphones, but it is necessary to implement according to the user's situation when introducing.

Benefits and Demerits of Adoption

Since there are already many explanatory articles from a web marketing perspective, this article is concise.
The following may be the advantages of introducing video content to a website.

• You can send more information to users than text or still images.
• You can expect to get more attention from users and increase your time per site.
• You can communicate messages and atmosphere more intuitively.
• You’ll be able to save yourself time and effort from autoplaying, and keep an eye on video content while you’re browsing the website.
• (In the case of smartphones) because more users browse on their phones than PCs, the number of users who can appeal increases.

On the other hand, the following are disadvantages.

• The larger the volume of a video, the more load it is on your browsing environment.
• (In the case of smartphones) it consumes a lot of communication from users.
• (In the case of smartphones) slow-speed, limited users can take a while to watch videos.
• It is difficult for users to avoid the disadvantages described above (when introducing automatic playback on smartphones).

Based on these, I think it is good to introduce video content and decide the correspondence and implementation contents with a smartphone.

What should be considered when introducing background video

In addition, if you want to incorporate the background video that will be automatically played into your website, whether it is a PC or smartphone, the following will be the point.

• The length of the video is said to be about 30 seconds long.
• The sound of a video. It is desirable that the auto-played videos are silent or muted, so users can open their website wherever they want.
• Alternatives to video, there will always be users in a viewing environment that you can't watch; or replace them with images depending on the environment.

It is difficult to convey the atmosphere of a new product or office to third parties who don’t know anything about it with just texts and images, as more sentences and images will make it easier for users to feel the burden of reading.
In that respect, video content can intuitively convey the atmosphere of itself by reflecting how products are being used and walking in an office.
It is too much to make video content even what should be clearly conveyed in sentences such as the specifications of products and recruitment guidelines, but if "the need for explanation by letters is thin, I want you to first touch the atmosphere of itself", it may be a great advantage to introduce video contents.

concrete implementation method

Well, he said that when introducing video content on a smartphone, it is necessary to implement according to the user's situation.
After that, details of the contents implemented on Nonsta's own site will be described.
The implementation requirements are as follows.

• Videos displayed on the entire top page of a site are automatically played not only by PC, but also when viewing your smartphone.
• For smartphone users who are unable to view or have difficulty viewing, it displays an alternative background image.

Implementation of Branching Processing Based on UserAgent Judgment

the automatic playback of inline videos (mute states) is possible Safari on and after iOS 10 or Chrome for Android 53 Yes.
Since it’s already been more than a year since both releases, there are some smartphone and browser users who don’t meet the requirements for auto-playing videos, but they want to tap on them to play them manually—but that doesn’t work with background video. That means non-sta’s site will default to an alternative background image, and only read those videos using API if they can be auto-played based on UserAgent.
Since it becomes complicated if the judgment conditions are too wide, we have created javascript for judgment as follows considering only those with a high utilization ratio (*90 percent browser share of smartphones is Safari and Chrome).

• For Android, either you’re not using a standard browser or your version of Chrome for Android is at least 53 (we first check if it’s available because the default UA statement contains a string called Chrome).
• For iPhone/iPad/iPod, the iOS version is 10 or more

Only if one of the above is satisfied, it returns true to enable reading YouTube IFrame Player API.
Note: As far as we can tell, if you’re using Chrome for iOS or an in-app browser from iOS 10 onwards, there is no clear information to be found. We have confirmed that the device will autoplay, but I’d like to update it when we know something about it.

YouTube IFrame Player API

Inline automatic playback is possible with video tags, but I wanted to do branch processing depending on the state of video playback. YouTube IFrame Player API (official reference here) Since the reference is in Japanese, I think we can handle it if you have basic knowledge of javascrpit.
On our site, we implement processing such as "Loop playback of YouTube list", "Mute the player" , "Hide the player (opacity: 0) while loading videos" and "Delete the player if there is an error in video playback and display alternative images" based on API functions or options.

See the Pen Inline Autoplaying of Videos Using YoutubeAPI and UserAgent by sayaka (@river_is_land) on CodePen.

Some of the things that have not been introduced (modernizr.js, Network Information API)

modernizr.js

Adding different class names for each browser environment and making changes to the processing ". modernizr.js (official website here) There is.
When I checked it at the time of implementation (December 2017), it was not possible to check the automatic playback of a smartphone (it will be judged impossible even though it is playable) Since there are judgment conditions called videoAutoPlay, it may be possible to incorporate depending on future updates.

Network Information API

「 Network Information API (visit Mozilla documentation here) The API allows you to determine whether it’s Wi-Fi or mobile, and how fast the connection is, but as of January 2018 we are still developing specifications that can only be used in some browsers.

instead

The evolution of smartphones and web browsers is really fast, and there are more things that can be done every day.
It’s still necessary to implement it, but after a little more time you might be able to take advantage of the video content in websites that browse on your smartphone.
We hope that the content of this article will help you introduce and implement video contents.

Thank you: the site that I used to refer to when implementing it.

Video Inline Autoplay on Smartphones
Autoplaying Videos on iOS 10 Mobile Safari
Can iOS 10 Automatically Play Videos?
Video Background: YouTube IFrame API
Tips When Using the YouTube Player API
Using IFrame Player API events and callback functions (onStateChange)