Video for the site
For video content — future. This is an effective way to promote goods and services, as well as a powerful source of traffic to the site. Take full advantage of the video format to expand your audience, increase their trust and increase sales.
First, let’s look at why a video is needed on a website at all. Now with the development of technology, many people prefer to watch and listen rather than read, whether it is good or bad is not for us to decide, but posting a video on the site will play into your hands. You can shoot video messages to site visitors, tell and show your products, conduct video lessons or various demonstrations, and also post videos related to the theme of your site.
High-quality video marketing — not just a video about business. This is a comprehensive strategy that solves the following problems:
- Demonstration of goods, creation of a visual showcase with a "live" description.
- Increasing customer loyalty by creating the effect of proximity — representatives of the company, familiar from the video, seem to be “one of our own,”rather than faceless strangers.
- A close acquaintance of the audience with the production — the product becomes familiar and understandable, and not a “pig in a poke”.
- Video instructions attract attention not only to the product, but also to the manufacturer: a person is more likely to turn to those who provided him with useful information than to an unfamiliar seller.
- Creating a positive image of the company through the ability to show strengths (advertising videos about the company allow you to show it from its advantageous side “live” — this will inspire more trust than text of similar content). li>
- Informational commercials are popular even among those who do not intend to buy anything (but they will be grateful to the brand for the interesting content and will remember it on the positive side).
Today, users want not only to read texts, but also to see various graphic elements, various interactive gadgets, and also watch videos directly on the site. In many cases, this creates an additional convenience for the user (for example, when he can watch a video instruction) or simply makes his stay on the site more fun.
One way or another, be it a useful video with a lesson or instructions, a demonstration video of a product, or an entertaining video designed to brighten up the user’s leisure time, sooner or later there is a need to implement this video into a web page. </p >
There are several ways to do this. Today we will look at 4 different ways that will help you cope with this task.
The first methodthat we will consider – This is an insertion of a video from a video hosting site (Youtube, RuTube, Vimeo).
Youtube is the safest service. Of the minuses – You cannot upload videos longer than 15 minutes, advertising before the video (if your video is popular).
RuTube will be useful if you need to post a long video. Of the minuses – terrible quality after loading, ugly player and advertising before the video.
Vimeo is not very popular in Russia, but the service is very convenient and simple. No advertising, very careful about security. But there are also disadvantages, among which one is very important – Loading the video is very slow, in two stages. And both stages can take up to 3 hours.
Second method– inserting video using a player script. First, the player files are downloaded and placed in the same folder where the video files are located. Next, the player script is connected and the code to be inserted into the site is written. The disadvantage of this method will be the consumption of space on the hosting, since the file needs to be uploaded in its entirety and the load when a large number of visitors watch the video at the same time.
Third method – insertion via html code. The ability to add video content to web pages is done using the“video”element. The video file must be stored on your server, to which the path in the html document will be specified in the code. The downside of this method is that the code will not work correctly on some older devices. And to do this you need to convert the file and make changes to the code. Another catch regarding older browsers that do not understand html5 tags. If a tag is unfamiliar to the browser, it simply ignores it, but does not ignore the content inside the unknown element.
The fourth way – use of third party services. QForm has the ability to add videos using a video widget. You just need to make the desired settings for the file (display type, launch time, analytics systems, CTA button). Next, an embed code will be generated, which needs to be placed in the body of the page.
Let's look at each method in more detail
Insertion via video hosting
After you upload your video to any video hosting site, you can get the HTML code of your video to embed the video on your website. For example, getting the HTML code of a video on YouTube video hosting looks something like this
Inserting using the player
Currently, there are many free players with which you can embed videos on a website. Let's use the Flowplayer player. This is a free video player for the web, which is designed specifically for website owners.
First of all, you need to connect the script to the head.
<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"> </script>Now let's go to the body of our file and place the player itself with the file being played. I'll place it directly below the corresponding heading, first placing it in a div tag, which I'll align to the center.
<div align="center">
<a href="video/mult.mp4" style="display: block; width: 560px; height: 315px;" id="player"></a>
<script type="text/javascript">
flowplayer("player", "http://your site/path/to/file/flowplay/flowplayer-3.2.2.swf",
{
clip: {
autoPlay: false,
autoBuffering: true
}
});
</script>
</div>There are also settings here that prevent the video from starting automatically, but allow it to load. If you want the video to start automatically, then after the path to the file «flowplayer-3.2.2.swf» you should remove the comma, close the parenthesis and put «;» (without quotes), and everything else that is after this and before the closing tag «/script» deleted.
Inserting video in HTML5
For this, the video tag is used, in which you can provide video in several formats at once, in case the main one is not supported by the user’s browser.
<video width="400" height="300" controls="controls">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
/*The video tag is not supported by your browser. */
<a href="video/duel.mp4">Download video</a>.
</video>In the video tag, the controls attribute is responsible for the appearance of video player controls.
The width and height attributes specify the width and height of the area for video playback, respectively.
In the source tag, the path to the file being played is indicated through the src attribute.
Each source element has a type attribute that specifies the MIME type of the embedded file and codecs to ensure video playback in all browsers.
Let's look at the indicated formats:
- ogg (.ogv, .ogx) – works in Firefox, Chrome and Opera. MIME type: video/og;
- webm – works in Firefox, Chrome, Opera and Adobe Flash Player;
- MIME type: video/webm;
- mpreg4 (mp4) – works in Safari and Chrome. MIME type: video/mp4.
We have also included a link that will help you download the video file if it is not supported by the browser. The path to the file was specified in the href attribute of the <a> tag.
Using a video widget on QForm
To work with the video widget, you must first add a website to the service.
Then click on the «Configure» button. opposite the site
Go to the «Video Widget» tab and click «Add Widget»
- Drag the file into the upload field or click on it to open a window for selecting the file on your PC. At the moment, only videos in MP4 format and no longer than 1 minute are supported.
- Specify the name of the video that will appear in the list of created widgets.
- Widget description – This is an optional parameter and is useful if you have similar video titles and need to somehow distinguish them.
- Select one of the types of widget display on the site:
- In the body of the page will allow you to place the video anywhere on the site page in vertical or horizontal orientation. This way you can advertise a product by inserting a video in the middle of the description.
- Vertical or round in miniature. In this view, you can place videos of employees about the company or video reviews from clients.
Next, if necessary, you can configure the video launch parameters, add a CTA button and set execution conditions for it, and enable goals for analytics systems.
When all settings are complete, click on the «Add» button.
The created widget will appear in the list. Click on the «Widget Code» button, copy the generated code and paste it onto the site inside the <body> tag.
As a result, the video will be displayed on the site based on the selected display.
In the body of the page
In miniature
