video insertion on the page: use javascript and flash

  1. Publisher
  2. x64 (aka andi)

some time ago I mentioned the video tag, specially implemented in html5

some time ago I mentioned the video tag, specially implemented in html5. however, unfortunately, the use of the tag will cause more inconvenience rather than benefit. therefore, I’ll tell you about the way in which you can completely do with one video format.

for one project I needed to find the possibility of unscrewing videos on the site. It was not possible to make a player from scratch on a flash (for a start, I don’t have a development environment and didn’t provide it), so it was necessary, in fact, to find a suitable candidate in the face of a flash player. nothing particularly complicated was required, since thanks to YouTube users are very easy to navigate in this kind of players;)

2 candidates located on the sites (a project from uppodʻa) and flowplayer . having made a small poke each, the first one was quickly abandoned in favor of the combine providing the present api. as time has shown, the inner gut didn’t let me down (although some people managed to get into vtyuhat

As you know, the first impression is rather deceptive, and preference is sometimes given to the least saturated device (especially if it uses the native language). It is this approach that was in demand on flv-mp3: the service provides the opportunity to “assemble” a player with specified characteristics (in form indicate the file being played, the screen saver, dimensions and some other parameters) and get the output code to insert the file. Yes, the option may seem very convenient, especially for people who consider html a strong witch, not to mention js and so on.

only the periodic addition of videos to the site is unlikely to contribute to the enthusiasm of constantly “constructing” the player by itself. alternatively, you can explore all the settings and automate through the server language. but this principle can only be called distorted (it is much easier to load videos on YouTube and get the ready code for downloading).

here we come to the very thing that can already be fully called a sorceress. you want to comprehend javascript magic? I will show that it is not at all difficult (even easier than using a constructor). and help with this flowplayer. you can choose a version from here , but the very first version that is distributed under GPL3 is quite suitable for your site.

The player supports playback of the following content: flv, mp4, m4v (for images - jpg, gif, png). The video is supported since version 9, so there should be no support problems.

Download the archive with the player and unpack it. You will need to upload 3 files to the site: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf and example / flowplayer-NumVer.min.js , where NumVer is just the version number, and may be, for example, 3.2.7 .

The first file contains the control panel, the second - directly the player and the third is the link that provides api. The first 2 files (* .swf) must be in the same folder. now it's time for the simplest code. it may be:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

The div element with the player ID is the container in which the video will be unscrewed. in the second line is the javascript file connection. Directly for the output is responsible one function flowplayer () , which passes 3 parameters:

  1. ID of the element in which the video should be played;
  2. the path to the player (namely to the player, and not to the controls that will be automatically loaded);
  3. Some additional parameters.

By the way, in addition to the identifier, you can directly pass a reference to an object or selector.

The code above does not display anything, but it gives an idea of ​​how easy it is to connect a flowplayer to a page. To output video, you need to create a third parameter, and this, by the way, is also quite simple.

for simplicity: the third parameter (config) is an associative array in which the following elements can be described:

  • clip - using this key, you can “make” global settings, for example, whether you want to automatically start buffering (autoBuffering) or playing (autoPlay), how to scale the content (scaling with the value of fit will keep the original aspect ratio, and for normal video will be used, perhaps only it). You can also specify the file being played (url), and even suspend events (functions that will be called, for example, when the movie starts playing);
  • playlist is a regular array (list). each element can be a string (in this case, the string is the address of the clip being played), or an associative array. in the second case, the data set can be viewed as a data set similar to the clip key from the previous item, i.e. you can specify to use buffering, start playing, and so on;
  • plugins - serves to expand standard features. One of the features is the ability to Russify the interface right on the spot.

Now a small example that includes a demonstration of the possibilities:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, playlist: [{url: 'https: //', autoBuffering: true, autoPlay: true}, 'http: // '], // to manipulate the plugins controls: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // removes rewind buttons stop: true, // add stop button scrubber: true // false disables scrolling of the video}}}); </ script>

The presented code sets the following as global settings: disabling auto-start playback, disabling auto-buffering, scaling video to fit the window. As a playable file, a picture and video are used, and the settings for the picture are overridden (since it should be loaded automatically). when you click on the picture (or the play button), the video is shown. as you can see, everything is very simple. if you want to add another video clip, simply add a new item to the playlist, separated by a comma. if automatic playback of the playlist is required, in the associative array clip is set, the value of autoPlay is set to true.

documentation containing api functions is located here . if someone does not understand English - it does not matter, everything is quite clear there. and after analyzing the code above, it is quite possible to understand what is in the docks. I highly recommend a peek, for sure there will be a “setting” that will be in demand.

example can look here . do not forget to look at the source code (Ctrl + U)


offline 1 week

x64 (aka andi)

Comments: 2842 Publications: 395 Registration: 02-04-2009

You want to comprehend javascript magic?