Create wonderful video effects with Flowplayer

Learn how to create great video players with Flowplayer, trigger events and add subtitles at video playback
5.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
539 students enrolled
Instructed by Daniele Protti IT & Software / Other
$19
$40
52% off
Take This Course
  • Lectures 61
  • Length 5.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English

Course Description

Videos are the most important assets to promote products on the Internet or to generate online courses.

The most important issue is the setup of the video player on the web page where the video will be displayed and played.

Flowplayer offers one of the best solutions on the Internet and has a free version which is great when you start off.

With Flowplayer you can create great video players even on light boxes and also you can add subtitles and display content on your page or video at specific times during the video playback, you can trigger event, e.g. play other videos, using this feature.

You can also improve the features using the Javascript API offered by Flowplayer.

If you want to create video courses with Flowplayer you can also create playlists and generate video thumbnails.

In this course I will show you all these features and more and at the end you will be able to create great video pages and video courses on your websites

What are the requirements?

  • be familiar with computers and the Internet
  • an advantage is to know some basic HTML, CSS and Javascript
  • an advantage is to know to record a video with a camera and a video camera or create videos with video editing tools

What am I going to get from this course?

  • Create and customize a video player with Flowplayer
  • Trigger events at video playback on a web page using Flowplayer
  • Add subtitles to a video with Flowplayer
  • Learn the Flowplayer Javascript API
  • Create playlists with Flowplayer

What is the target audience?

  • Who is familiar with computers and the Internet
  • familiarity with the function and basic use of the software
  • familiarity with Windows or Mac computers
  • Basic knowledge of HTML and Javascript is recommended

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Flowplayer - The Video Player
About the Author
Preview
01:44
00:26

Why should you use Flowplayer for your video players

10:09

Overview of the main features, functions and possibilities of Flowplayer the service to generate video players for your web pages and web sites

06:06

In this lecture you will have an overview of the Flowplayer website.

This overview is important to understand all the amazing features of Flowplayer and where to find them.

How to setup Flowplayer

How to customize your video player

How to make your video play with Flowplayer

How to generate events while playing your video with the Flowplayer software

How to generate money with Flowplayer

How to add Adsense advertising to your video player using Flowplayer

Flowplayer Analytics

Flowplayer Skins

What encoding formats are suggested for Flowplayer

Section 2: The Designer
Introduction
00:30
06:38
Overview and basic understanding of the Flowplayer designer to customize your video player
03:16

Verify the results of using the Flowplayer designer to format your video player

05:14

Use the Flowplayer designer to customize your video player

Upload your video and your web page with the video player made with Flowplayer

See the results of your Flowplayer customization on the Web

Section 3: The Setup Process
Introduction
00:51
06:11
Overview of the Flowplayer Setup Understand and learn how to setup your video player with the Flowplayer software
08:18

Understand basic html to create your video web page with flowplayer video player

05:12

What is FileZilla

What is an FTP Client

Why it is important to use an FTP Client in order to publish your web pages and videos on the Web

Upload videos and files to your server with Filezilla

Flowplayer and Filezilla: the 2 tools you cannot make without as a web video designer

12:12

Guidelines to do a basic setup with Flowplayer

Basic setup with Video Tag

Setup a HTML5 video player with Flowplayer

The Automatic installation with Flowplayer

09:20

Overview of the information needed to start the setup of Flowplayer for a video tag based installation

Understand the difference between: automatic installation, manual installation and pur Javascript installation

jQuery, Javascript, Video Tag, HTML5 and Flowplayer

06:26

Understand the pure Javascript setup with Flowplayer Javascript and Flowplayer

02:45

Understand the manual setup for your video player with Flowplayer

jQuery setup with Flowplayer

Section 4: Customizations
Introduction
00:34
04:45

Edit your installation after the automatic setup in Flowplayer

Customize your video player after the automatic installation in Flowplayer

Why you should use the automatic installation when your start off with Flowplayer?

How to set a splash image to a video player with the automatic installation in Flowplayer

Customize your style with the Flowplayer Designer
10:13
03:40

How to customize your video player with CSS after you generate your code with the Flowplayer designer

Edit the output of a Flowplayer style with CSS

01:40

Overview of the Skinning feature of Flowplayer

How to design your video player with the skinning feature of Flowpayer

Flowplayer Skinning and CSS3

01:59

How to customize and use CSS3 to customize the skin in Flowplayer

Understand how to set the skin of your video player with Flowplayer and CSS3

Section 5: Add special effects
Introduction
00:48
01:11

What are cuepoints?

Understand the cuepoints in Flowplayer

Overview of the cuepoints in Flowplayer

What can you do with cuepoints in Flowplayer

Trigger events with cuepoints with Flowplayer

Trigger events when a video is played with Flowplayer

10:29

Some examples of cuepoints with Flowplayer

How to show call to actions and HTML widget on a video with cuepoints in Flowplayer

Video chapters with Flowplayer cuepoints

07:01
Some more example of cuepoints with Flowplayer
04:20

How to add subtitles to a video on a video player with Flowplayer

Show subtitles at specific times on a video with Flowplayer

05:06
How to create a video playlist with Flowplayer
Section 6: Addons
Introduction
00:34
01:25

How to do Video embedding with Flowplayer

Make your viewers publish your video on their website and make it viral

07:06
Use Google Analytics with Flowplayer to track your videos and their performances on the web Understand how many people watch your videos, how many minutes they watch your videos, when they stop to watch your videos, etc.
04:58

How to make money with Flowplayer

How to monetize from Google Adwords with Flowplayer

Show ads on your videos with Flowplayer
Section 7: Plugins
02:00
Overview of the available plugins in Flowplayer
Section 8: APIs
Introduction
00:40
02:32

The Javascript API of Flowplayer are a library to extend the functionalities of the video players.

In this video you will have an overview of what an API is and what an Object in Object Oriented Programming (OOP) is.

You will see the definition of API, the definition of Object and you will learn the concepts of Property, Method and Event in OOP.

01:05

In this video you will see:

  • what Javascript and API means
  • what Javascript API of Flowplayer is
  • why and how to use the Javascript API of Flowplayer
07:21

Overview of the Flowplayer Drive API

Overview of the Flowplayer Javascript API

06:33

Global API Access is a way to use the Flowplayer Javascript API for any setup (Video Tagged based - automatic and manual, and based on pure Javascript).

In this lesson you will leran how to use the Flowplayer API for the various setup.

06:14

In this lesson you will see an example of application of the Global API Access.

05:13

In this lesson you will learn how to use the API in the pure Javascript setup using the Selective API Access.

You will define the api variable in Javascript (var api) and you will set it equal to the anonymous function flowplayer.

You will unnderstand the oncept of anonymous function and how to set and refer to its parameters.

03:27

The Instant API Access are the best implementation of the Selective API Access using the pure Javascript setup.

It is the recommended way to do programming in Javascript for Flowplayer and it is based on anonymous and asynchronous functions.

06:07

Properties are parameters of the API object where the information about the state of the video players is stored.

During the life of a video player its state will change, e.g. a new video will be loaded, a video will playback, paused and stopped, cuepints can trigger events, etc.

You will see all the property of the API object and of some of its "children".

04:44

Plugins and extensions (e.g. cuepoints and subtitles) are objects which are hierarchically below the API object in the Flowplayer structure, i.e. subtitles and cuepoints are assigned to a video player which refers to the API object.

You will see the list of elements and their type which belong to the API object and their properties, e.g. api.cuepoint.time.

03:44

The Video object is the most important object which depends on the API object and therefore is below it hierarchically.

The Video object is expressed in JSON format and is assigned to properties, methods and events, as well as the parent API object. An example are the properties api.video.duration and api.video.time.

04:06

Methods are actions assigned to objects which can be triggered by events or by the user.

In this section you will see the main methods assigned to the API object.

01:29

As for the Extension properties, extensions e,g, cuepoints and subtitles have methods.

In this lesson you will see some of the methods of these extensions.

02:24

The Load method is a special method of the API object to load video players and videos.

You will learn more about this method in this lesson.

05:06

Events are a core concept in OOP. Events are actions triggered by external causes and will produce a change in the properties or to other objects.

In this lesson you will learn the main events of the API object.

02:24

Events can be also attached to methods. That means that you can define methods which verify if an event occured and then will execute a function (e.g. the "on" method).

You will learn the main attaching methods for the API events.

01:40

The Flowplayer video players can be setup in 2 environments: FLASH and HTML5 (with the VIDEO TAG). If you are using FLASH or HTML5 is an information which is stored in the engine object which is part of the Flowplayer API.

You will know more about this object and its properties in this lesson.

JavaScript API - The flowplayer function
03:30
Section 9: Conclusions
Example of Application
10:44
19 questions

You will verify your knowledge about Flowplayer and video players

Conclusions
00:43
Section 10: Special Bonuses
02:24

Encoding in Flowplayer

Overview of the main encoding formats recommended for Flowplayer

57 pages

Important report on the possible legal issues you may have as a business online

What you need to do when you have an online business to protect yourself legally

How to protect your work

Which works you can use and cannot use as an online business
02:29

List of the most popular web places where to find royalty free music for free or paying a monthly/annual fee

Recommendations on how to find and select royalty free music and sound clips

09:51

Where to find royalty free images

Where to find royalty free cartoons

Where to find royalty free avatars

Where to create avatars for free

05:59

Where to find royalty free videos to use as videos and as video backgrounds

Why video backgrounds are important

08:21

How to include Flowplayer into a FancyBox

How to play a Flowplayer video on an overlay or lightbox

05:36

How to create video widgets with video thumbnail with Flowplayer video player on Fancybox overlays

Useful information
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniele Protti, Project Manager and Software Architect

I have 20+ years experience in IT project management, software development and software architecture.

I have led several teams of software developers as project manager, quality manager and as team leader in different companies and different countries in sectors e.g. telecommunication, research & development, travel business, Internet marketing and Internet business, consultancy and services.

I have been responsible to collect the requirements of projects, applications and processes, design the databases and specify the final objects.

During my career I have accumulated a lot of experiences dealing with processes of any kind and the need to define the tools to manage them and collect the information.

Most of my tools have been written in VB, VBA, C++, C#, Java, PHP, Javascript using databases e.g. Informix, Postgres, Oracle and MySql.

I have organized all my experiences in courses which are not only a list of functions and methods but contain also my practical experiences and considerations about how to cope with the different situations and which solutions to suggest.

Ready to start learning?
Take This Course