SOURCE URL: https://flowplayer.org/docs/setup.html

1. DOCTYPE

At the top of your page declare the HTML5 doctype:

<!DOCTYPE html>

Otherwise HTML5 video will not work in some browsers, notably Internet Explorer 9.

2. <head/> setup

<!-- 1. skin -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/minimalist.css">
 
<!-- 2. jquery library -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
 
<!-- 3. flowplayer -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
  • These files are served globally from a content delivery network (Amazon CloudFront). Free for you to use.
  • You can place the files on your own servers too, maybe combine them with your existing files for faster initial load
  • jQuery v1.7.1+ required. Also make sure to load only one version of the library when integrating Flowplayer in an existing page.
  • Alternate skins are available.
  • In general it is recommended to load CSS stylesheets before JavaScript assets.

3. <body/> setup

For each player you need this HTML snippet

<div class="flowplayer">
   <video>
      <source type="video/webm" src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"  src="http://mydomain.com/path/to/intro.mp4">
   </video>
</div>
  • A DIV with a CSS class name "flowplayer" and a nested VIDEO tag
  • Think of a DVD player with a disc: video is inside the player.
  • Flowplayer attempts to use HTML5 video and if it's not supported then Flash (9.0+) is used
  • The Flash file is loaded from //releases.flowplayer.org/5.4.6/flowplayer.swf
  • The player's width is 100% and its height is determined by the ratio configuration option
  • The first frame of the video is shown initially, and playback starts when the user clicks the player
  • When JavaScript is disabled the video tag is still functional in browsers that support HTML5 video - except for Firefox where JavaScript is mandatory

The HEAD and BODY tags shown above create a minimal setup.

This is the automatic installation method. The quickest and easiest way to get you going with a simple setup.

Details

Manual installation

Here is a customized setup to give you an idea of the possibilities:

<div class="player" data-ratio="0.4167">
   <video preload="none">
      <source type="video/webm" src="http://mydomain.org/intro.webm">
      <source type="video/mp4"  src="http://mydomain.org/intro.mp4">
      <source type="video/ogg"  src="http://mydomain.org/intro.ogv">
   </video>
</div>
 
<script>
// run script after document is ready
$(function () {
 
   // install flowplayer to an element with CSS class "player"
   $(".player").flowplayer({ swf: "/swf/5.4.6/flowplayer.swf" });
 
});
</script>
  • The player is installed "manually" using the flowplayer jQuery plugin.
  • The container needs to have a different class name than "flowplayer", such as "player" here.
  • A custom path is configured for the Flash component, passed as a parameter to the flowplayer call.
  • The Flash engine is the first engine to try before the default HTML5 engine. This is configured via a data attribute which is another way to provide configuration variables.
  • Video preloading is disabled with the standard preload attribute.
  • Multiple video formats for various clients are provided with nested source tags.

See this example.

Empty container

v5.4 With the manual installation method you can install the player with JavaScript only without providing a HTML video tag on your page. Simply specify the video sources as item(s) of the playlist configuration:

$(function () { // ensure DOM is ready
 
   // this will install flowplayer into an element with id="player"
   $("#player").flowplayer({
      // one video: a one-member playlist
      playlist: [
         // a list of type-url mappings in picking order
         [
            { webm: "http://mydomain.org/video.webm" },
            { mp4:  "http://mydomain.org/video.mp4" },
            { ogg:  "http://mydomain.org/video.ogv" }
         ]
      ],
      ratio: 3/4 // video with 4:3 aspect ratio
   });
 
});

You can put the above incantation anywhere on your page, also in the HEAD section - after loading jQuery and the flowplayer script. jQuery ensures that the document is ready for the player installation. Then all you need on your page is this:

<!-- empty container element with unique id="player" -->
<div id="player"></div>

Check out the demo.

Summary

There are two ways to initialize Flowplayer

  1. automatic: in which case you supply a class name "flowplayer" for the player element and Flowplayer consumes the global configuration and data- attributes.
  2. manual: in which case you supply any other class name than "flowplayer" and provide the configuration yourself in JavaScript Object Notation like this: 
    $(".my-custom-player-container").flowplayer({ ratio: 5/12 });

Player size

The size of the player is determined by the container element's dimensions. For example:

.flowplayer {
   width: 600px;
   height: 338px;
}

Using hard coded width and height is not recommended since the player size is fixed no matter what the screen size is. Flowplayer is designed in such a way that it will adjust itself to various screen sizes.

By default Flowplayer uses all the width that it is given, and the height of the player is determined by the ratio configuration setting which defaults to 9/16. Under the premise that letterboxing or empty sidebars on the video screen are to be avoided, this assumes a video of 16/9 aspect ratio. Note how the notation is the inverse ratio of how one usually specifies the aspect ratio of a video: height/width (container) as opposed to width/height (video).

You can change the ratio in the player configuration:

flowplayer.conf.ratio = 3/4;

Or you can set the ratio in the HTML configuration using the data-ratio attribute of the container element as follows:

<div class="player" data-ratio="0.417">
   <video>...</video>
</div>

The default value of data-ratio is "0.5625", i.e. the default ratio of 9/16.

Alternatively you can change the container's ratio via CSS:

.flowplayer .fp-ratio {
   padding-top 41.7%
}

Now when you resize the browser the video size will adjust accordingly, and the video's width/height ratio is kept.

Since v5.4.2 you can also let the player size dynamically be determined by the video's aspect ratio: Set the adaptiveRatio JavaScript configuration option to true.

This comes in handy for quick setups when you do not happen to know the exact dimensions of the video, but still want the player's screen size to match the aspect ratio of the video. By consequence refrain from configuring adaptiveRatio for a splash setup as the video's dimensions - and therefore its aspect ratio are only available once the video is loaded and the player is ready.

Poster

The poster setup is recommended when you want to preload the video at startup while giving the player a custom look and feel.

Since v5.2 Flowplayer features an extended and flexible concept of the poster VIDEO tag attribute: If the poster attribute is given, it will also be used as CSS background image of the container element. Par consequence you can also choose to omit the poster attribute, and instead specify a background image or background color (treated as monochrome "poster") CSS directive to the same effect.

The advantages of this approach:

  1. works consistently in Flash and HTML5
  2. does not break when browser is resized (very hard to do in Flash)
  3. you can take advantage of CSS techniques such as positioning, animations, scaling and many more
  4. you can use CSS sprites and thereby avoid multiple server calls
  5. you get rid of browser issues, for example Internet Explorer 9 loads the first frame of the video on top of the poster image
  6. you can use higher resolution images with Retina and similar devices

To sum up, a poster setup requires that

  • a background-image or background-color CSS rule applies to the container element or
  • the VIDEO tag carries a poster attribute and
  • the splash setup is not enforced.

If both background-image for the container and poster attribute for the VIDEO tag are given, the poster image takes precedence and replaces the background image.

When the above conditions are met, the CSS "is-poster" state class is assigned to the container at startup. This allows you for instance to create a loading animation for the entire player area with a few CSS rules, like in this example poster setup.

Splash

Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits:

  1. You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode.
  2. There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics.
  3. Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically.

By design the splash setup also disables preloading of the video.

Please have a look at the poster and splash comparison page.

To set up splash screens you either add the state class name "is-splash" to the CSS class of the container element:

<div class="flowplayer is-splash"
     style="background:#777 url(/path/to/splash.jpg) no-repeat;">
   <video>
      <source type="video/webm" src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"  src="http://mydomain.com/path/to/intro.mp4">
   </video>
</div>

Or you script the addition of the "is-splash" state class by turning the splash configuration option on. For instance this global configuration applies the splash setup to all players on the page:

flowplayer.conf = {
  splash: true
};

The splash image is given in the CSS background or background-image directives for the container element. However, providing an image is not mandatory to set up a Flowplayer splash screen; in fact there is no CSS requirement for the splash setup. Usually you want at least a background-color to discern the player from its surroundings.

Here is how it works:

  • Upon recognition of the "is-splash" class name or the splash option the VIDEO tag is temporarily removed from the container element.
  • When the splash screen is clicked the VIDEO or an OBJECT tag, depending on the engine picked, is placed inside the player container and the "is-splash" CSS class name is removed.
  • Unloading does the opposite: the VIDEO or OBJECT tag is removed and the "is-splash" class is re-added.
  • The player can be made to go back to splash state by hitting the ESC key or by calling the unload API method.
  • Adding the "is-closeable" state class replaces the fullscreen button with an unload button.

Splash screens are used heavily in our demo area. They are one of the main reasons why people use Flowplayer.

Video formats

Currently 3 major video formats are used on the web.

  1. MP4 gives a complete cross browser support with the aid of Flash
  2. WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browsers
  3. OGG gives HTML5 video support for older versions of Firefox and Opera

Since v5.3 Flowplayer also supports HLS (Apple HTTP Live Streaming) from M3U8 files (demo).

Browser ogg mp4 webm m3u8
Internet Explorer - 9.0 - -
Firefox 3.5 - 4.0 -
Chrome 3.0 3.0 6.0 -
Safari - 3.1 - 6.0
Opera 10.5 - 10.6 -

Taken from Wikipedia.

By default Flowplayer attempts to use HTML5 video, and if it's not supported then Flash (9.0+) and MP4 is used. MP4 is enough for complete browser support, but providing WebM and/or OGG video gives you broader support for HTML5 video which is the preferred technology. Also note that Flash does not support byte-range requests, therefore random seeking will not work with MP4 in Flash mode.

Note that browser support of video formats is subject to changes - Chrome is planning to remove MP4 support, and Firefox is planning to add MP4 support. Your best bet for reliable HTML5 video is to provide MP4 and WEBM variants for each of your videos.

Safari on Windows is capable to play HTML5 video when QuickTime is installed.

HLS support so far is confined to on-demand streams because of the lack of HTML5 live video alternatives.

Check out this detailed table which shows what formats your current browser can play.

Providing formats

Single format

<div class="flowplayer">
   <video preload="none">
      <source type="video/mp4" src="http://mydomain.com/path/to/intro.mp4">
   </video>
</div>

Always use a SOURCE tag inside the VIDEO tag and specify the video type. Flowplayer will then tweak the VIDEO tag as needed by platform or browser. Or, for the Flash engine, replace it with a Flash object.

Important: If you intend to offer embedding the value of the src attribute must be an absolute URL - unless it is a RTMP location. Enforcing the HTTP protocol is also recommended for playback quality.

Multiple formats

<div class="flowplayer">
   <video>
      <source type="application/x-mpegurl" src="http://mydomain.com/intro.m3u8">
      <source type="video/webm" src="http://mydomain.com/intro.webm">
      <source type="video/mp4" src="http://mydomain.com/intro.mp4">
      <source type="video/ogg" src="http://mydomain.com/intro.ogv">
   </video>
</div>

Formats via JavaScript

v5.4 With the manual installation method you can provide the formats in the JavaScript configuration as described in the section for installation into an empty container.

The syntax is the same as for the API's load method: a list of type-url mappings in picking order.

Picking order

First Flowplayer decides which engine to use, depending on the engine configuration or the capabability of the browser, and will choose from the HTML5 sources or pick the Flash source.

The HTML5 sources will be tested and picked in the order you list them in the video tag or in the JavaScript array. For example, if you deploy a HLS stream (application/x-mpegurl), it must listed before the MP4 source, otherwise the HLS stream will never be picked because only browsers which can play MP4 also play M3U8 files.

Due to a bug in some Chrome versions you should also list WEBM before MP4.

It is recommended to provide the OGG format only in addition to WEBM and MP4 and as a last resort for older browsers. Many Opera versions for instance have problems in processing the necessary metadata and might not be able to load OGG in spite of claiming to support it.

Mime types

Make sure that all the files are available on the server and that the server transmits them with the correct Content-Type. Depending on your server you might have to extend the .htaccess or mime.types files (Apache), use the IIS manager (Internet Information Server) or set the header via Metadata (Amazon S3). Example .htaccess file:

AddType video/webm            .webm
AddType video/mp4             .mp4
AddType video/ogg             .ogv
AddType application/x-mpegurl .m3u8
# hls transport stream segments:
AddType video/mp2t            .ts

Video attributes

The nested VIDEO tag accepts various arguments. For example:

<video autoplay loop>
  • autoplay will start the playback automatically - demo
  • loop starts playback again from the beginning when the video ends
  • preload starts pre-loading the video in the background
  • poster shows an image on the video screen at startup

Both the HTML5 video tag and the Flash component respect these attributes. Particularly have a look at Flowplayer's poster implementation.

Note that there are few browser issues.

Flash

By default Flowplayer uses the HTML5 video tag and falls back to Flash when HTML5 video is not supported. Alternatively Flowplayer can be configured to use Flash first and then fall back to HTML5 when Flash support is not present. The primary engine can be configured with the engine option or the data-engine attribute:

This will play intro.mp4 using the Flash engine if Flash is enabled in the browser:

<div class="flowplayer" data-engine="flash">
   <video>
      <source type="video/webm" src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"  src="http://mydomain.com/path/to/intro.mp4">
   </video>
</div>

The Flowplayer Flash component requires Flash version 9.0.0. To play mp4 files the browser needs at least Flash version 9.0.115 to be installed. If you want to support v9.0.0 you need to provide a FLV file.

This will play intro.flv if HTML5 video is not supported and Flash version greater or equal 9.0.0 is installed:

<div class="flowplayer">
   <video>
      <source type="video/webm"  src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"   src="http://mydomain.com/path/to/intro.mp4">
      <source type="video/flash" src="http://mydomain.com/path/to/intro.flv">
    </video>
</div>

Flash video

Flowplayer supports a special video/flash source type to target video specifically for Flash. For example:

<div class="flowplayer">
   <video>
      <source type="video/webm"  src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"   src="http://mydomain.com/path/to/intro.mp4">
      <source type="video/flash" src="http://mydomain.com/path/to/intro-flash.mp4">
    </video>
</div>

The Flash engine will always pick the source of type video/flash ("intro-flash.mp4" here) regardless of the order in which the sources are listed. This special support is handy when you want to optimize your video encoding specifically for the Flash engine, or load the flash video from an alternate location, or use the rtmp protocol.

Flash. The good parts

  • DRM and stream encryption. You can hide the location of your videos
  • Live broadcasting
  • Seamless transition between different qualities

All these are supported by Flowplayer Flash and currently not by Flowplayer HTML5.

The bad parts

  • Flash is not supported on iPad and iPhone and is moving away from Linux and Android too
  • Developers are moving away. Flash is risky
  • Flash is heavy. It stresses the CPU and consumes a lot of battery.
  • Adobe itself is moving to HTML5.

The Flowplayer HTML5 Flash engine supports the RTMP protocol so you can do streaming. DRM and quality switching are not supported at the moment. We have plans and will keep a close eye on the future of Flash.

Keyboard shortcuts

Here's an overview of the available keyboard shortcuts to control the player:

Key Action
space play/pause
q stop | unload (in a splash setup)
f fullscreen
shift + left arrow slower (see the speeds option)
shift + right arrow faster (see the speeds option)
down arrow volume down
up arrow volume up
m mute
left arrow seek backward
right arrow seek forward
. seek to previous position
number seek to numbertimes 10 percent of duration

Keyboard shortcuts can be turned off by setting the keyboard configuration option to false.

A cheat sheet of the shortcuts is always available to the user when she types ? while hovering over the player area. See also the tooltip configuration option.

Configuration

The player supports various configuration options. For example:

<script>
$(".myplayer").flowplayer({
 
   // option 1
   swf: '/swf/flowplayer.swf',
 
   // option 2
   rtmp: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
 
});
</script>

Complete list of options

option default  value description
adaptiveRatio False v5.4.2 whether the player's ratio adapts vertically to the video's aspect ratio. Only available as JavaScript configuration option. Do not apply in conjunction with the ratio and flashfit options.
bufferTime 0.1 v5.4.4 specifies how long to buffer messages before starting to display the stream. See Adobe's docs for NetStream.bufferTime for more info. Affects the Flash engine only and only available as JavaScript configuration option.
debug False show debug messages on the console. Causes errors if window.console is not present
disabled False whether playback should be forced by disabling the UI. Seeking, pausing etc. is impossible. API still works. Typically used in ads.
engine 'html5' the first engine to try. currently supported values are "html5" and "flash"
flashfit False v5.3 whether video aspect ratio in Flash non-fullscreen mode is preserved. Only set this to true if the container's dimensions do not fit the video's aspect ratio, e.g. for playlists with clips of different aspect ratio. Note that setups with dynamic container resizing require the container to be of the same ratio as the video. The option also cannot deal with anamorphic videos as Flash is agnostic of a video's display aspect ratio.
fullscreen True v5.2 whether fullscreen is enabled. Defaults to false when the player is viewed in an IFRAME.
errors Array An array of error messages. The default list can be found in the API documentation.
keyboard True use keyboard shortcuts - enabled by default
live False v5.4.4 whether the player is set up for live streaming (experimental); skinning alternative: is-live state class
muted False v5.2 whether player should start in muted state
native_fullscreen False v5.1 Use native fullscreen on mobile webkit browsers (iPad, Android) instead of full browser window. The screen will be bigger but native video controls will be in use instead of customizable Flowplayer controls.
ratio 9 / 16 A decimal number representing the height of the player in proportion to its width. You usually want to change this setting for videos with a different aspect ratio than 16/9. You can override this by explicitly setting the height CSS property for the container in which case the player height stays the same on all devices and screen sizes.
rtmp   Location of the Flash streaming server. When provided it's possible to jump randomly on the video timeline on Flash mode. Read more about server side.
speeds [0.25, 0.5, 1, 1.5, 2] v5.1 the available speed levels that are used with SHIFT + arrow keys or with speed() API method. 1 is the default speed and values less than 1 means slow motion and values greater than 1 means fast forward. Not supported by the Flash engine, older browsers and many mobile devices.
swf   location of the Flash file. path can be absolute or relative. By default this is "//releases.flowplayer.org/5.4.6/flowplayer.swf" for the free version.
splash False Enables splash screen; skinning alternative: is-splash state class
tooltip True v5.2.1 Whether "Hit ? for help" tooltip is shown
volume 1 initial volume level

Various plugins accept additional configuration options:

The provided configuration can also be just a string, in which case it is interpreted as the swf option.

Commercial configuration

The commercial version allows you to get rid of the Flowplayer logo and optionally use your own. By default this will be displayed in the bottom/left corner of the player in the embedded players. When a user clicks the logo she will be redirected to the originating page.

Here are the configuration variables for the commercial version:

option default description
key   A valid license key removes the Flowplayer branding from the player. Since v5.1 the value can be a comma separated string of keys to support multiple domains. For example: '$688345122773207, $334773811075656'
logo   Location of your logo. URL or path.
swf   Location of the Flash file. URL or path. By default this is "//releases.flowplayer.org/5.4.6/commercial/flowplayer.swf" for the commercial version.

Here is a minimal commercial setup. Take a look at its source code and you can see how the key is provided. You create the key on your account page after purchase by entering the domain name you wish to license into the "Add domain" field.

Make sure to deploy the commercial release available at your Flowplayer account, or to load the commercial API script from //releases.flowplayer.org/5.4.6/commercial/flowplayer.min.js. Also update the location of flowplayer.swf - in case you previously configured it explicitly via data-swf or flowplayer.conf.swf - to point to the commercial version. Both the commercial API script flowplayer.min.js and Flash file flowplayer.swf are required for license validation.

Show logo on origin domain

By default the logo is not shown on your own site (origin domain) because your branding is already there. You can change this with CSS:

.flowplayer .fp-logo {
  display: block;
  opacity: 1;
}

To always show your logo, even while the mouse does not hover over the player area, use:

.flowplayer .fp-logo {
  display: block;
  opacity: 1 !important;
}

Global JavaScript configuration

Here we provide global settings for all players on the page:

<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
 
<!-- global options -->
<script>
flowplayer.conf = {
   ratio: 5/12,
   swf: "/media/swf/flowplayer.swf",
   analytics: "UA-27182341-1"
};
</script>

The flowplayer.conf object contains the configuration for Flowplayer. You should customize its properties right after Flowplayer has been included in your page (with script src). Another common place to put site-wide Flowplayer defaults is in an external javascript file which contains the website logic and is loaded after the basic assets. This is a nice way to set up global settings such as the Google Analytics ID and paths to embedding and flash files.

Each player will have these as defaults but they can be overridden for individual players.

You can set individual options as follows:

<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
 
<script>
flowplayer.conf.ratio = 5/12;
</script>

Remember to set these after the flowplayer.conf = {...} setting if you have one because setting the entire conf object will discard any individual property settings.

Selective JavaScript configuration

This is the way to configure specific players on the page in conjunction with a manual installation when the document is ready:

$(function () {
   // install player into container elements of class="selected"
   $(".selected").flowplayer({
      // configuration for this player
      splash: true,
      analytics: "UA-27182341-1"
   });
});

The configuration is normally passed as in JavaScript Object Notation as argument to the flowplayer() call. If the argument is a simple string it is treated as the location of the flowplayer swf file.

In this case you avoid to set the hard-coded "flowplayer" class for the container element to avoid processing overhead by an attempted automatic install.

See the manual installation details, installation into an empty container or the JavaScript playlists for further examples.

Selective configuration overrides global configuration.

Selective HTML configuration

Configuration options can also be defined directly in HTML code with "data-" prefix:

<div class="flowplayer" data-ratio="0.5625" data-volume="0.5">
   <video autoplay>
      <source type="video/webm" src="http://mydomain.com/path/to/myvideo.webm">
      <source type="video/mp4"  src="http://mydomain.com/path/to/myvideo.mp4">
   </video>
</div>

By taking advantage of the hard-coded "flowplayer" class name, global configuration and data attributes you can set up players with just HTML and CSS.

Camel cased option names like adaptiveRatio must be written as compound lower cased attributes: data-adaptive-ratio.

HTML configuration overrides global configuration and selective JavaScript configuration.

Order of precedence

The above override rules result in this order of precedence regarding the possibilities to configure the player:

  1. selective HTML configuration
  2. selective JavaScript configuration
  3. global JavaScript configuration

Server side

If you want to jump randomly on the timeline without caring how much video has been downloaded, your server needs to support both byte-range requests (for HTML5 video) and the RTMP protocol (for Flash). Note that you cannot seek in MP4s with byte-range requests in Flash mode, therefore, in case you cannot deliver via RTMP, you should always provide an alternative video source (WEBM or OGG video) for e.g. Firefox.

The easiest way to do this is to use a content delivery network such as Amazon Cloudfront which supports both of these technologies and serves the video files from locations closest to your audience.

For HTML5 video you don't have to do any client side configuration. If your server supports byte-range requests then seeking should work on the fly. Most servers including Apache, Nginx and Lighttpd support this.

RTMP support is provided by streaming servers such as Adobe FMS or Wowza. Once it's been set up you need to configure the server connection URL (also called Net Connection URL) via the rtmp option and add an additional source tag of type="video/flash" with the path to the video file in its src attribute.

<!-- flowplayer with RTMP configuration option -->
<div class="flowplayer" data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st">
 
  <video>
    <!-- consumed by flash -->
    <source type="video/flash" src="mp4:path/to/myvideo.mp4">
 
    <!-- consumed by html5 video tag -->
    <source type="video/webm"  src="http://my.stream.com/myvideo.webm">
    <source type="video/mp4"   src="http://my.stream.com/myvideo.mp4">
  </video>
 
</div>

iframe

For players shown in an IFRAME fullscreen is disabled by default. It would not work in browsers without native fullscreen support, and some browsers forbid fullscreen from IFRAMEs, notably from a remote orgin, without offering a reliable detection mechanism.

If you are in control of the IFRAME's source and the page where the IFRAME is shown you can allow fullscreen by excplicitly setting the fullscreen configuration option to true on the originating page and specifying the allowfullscreen attributes for the IFRAME:

<iframe src="http://example.com/iframe-src.html"
        width="800" height="500"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
        allowfullscreen="true"></iframe>

Check out the iframe demo.

Flowplayer-Setup的更多相关文章

  1. js网页视频播放: vcastr22 、 flowplayer 、 jwplayer

    实例结构: 实例1: demo.html <embed src="vcastr22.swf?vcastr_file=../wujiandao.flv" allowFullSc ...

  2. 使用Setup Factory安装包制作工具制作安装包

    在我们开发完软件后,除了极个别案例我们把整个目录复制给客户用外,我们一般都需要做成安装包,方便整个软件的部署操作,以安装包的部署操作可能简单的是复制文件,也可能包括一些注册表.数据库等额外的操作,不过 ...

  3. Hive-0.x.x - Enviornment Setup

    All Hadoop sub-projects such as Hive, Pig, and HBase support Linux operating system. Therefore, you ...

  4. C/S打包 客户端/windows程序 Inno Setup

    之前介绍过InstallShield打包工具,本文再介绍更加方便的打包工具Inno Setup Inno Setup相对来说,比InstallShield更容易使用,不需要去等VS去创建项目,只要提供 ...

  5. A couple of notes about .NET Framework 4.6 setup behaviors

    https://blogs.msdn.microsoft.com/astebner/2015/06/17/a-couple-of-notes-about-net-framework-4-6-setup ...

  6. Appium for iOS setup

    windows下appium设置 之前研究了一段时间的appium for native app 相应的总结如下:                                           ...

  7. RIDE -- Robot Framework setup

    RobotFramework 是一款基于python 的可以实现关键字驱动和数据驱动并能够生成比较漂亮的测试报告的一款测试框架 这里使用的环境是 python-2.7.10.amd64.msi RID ...

  8. [Tool]Inno Setup创建软件安装程序。

    这篇博客将介绍如何使用Inno Setup创建一个软件安装程序. Inno Setup官网:http://www.jrsoftware.org/isinfo.php. 可以下载到最新的Inno Set ...

  9. python setup.py 管理

    发布项目遇到了坑……特此记录. How to write setup.py: https://docs.python.org/2/distutils/setupscript.html Setup.py ...

  10. inno setup读取注册表遇到的一个坑

    一.背景 目前,公司针对PR开发的一个插件需要发布到64位系统上.该插件包括一个prm格式的文件和若干个DLL文件.其中,prm文件需要复制到PR公共插件目录下,DLL需要复制到Windows系统目录 ...

随机推荐

  1. $.getJSON JSONP的新坑

    神坑1:返回的内容必须是正规的json数据.如 { "firstName": "Bill", "lastName": "Gates ...

  2. js 获取中文的拼音

    es6 + 模块化封装 "use strict"; module.exports = { //参数,中文字符串 //返回值:拼音首字母串数组 makePy (str) { if ( ...

  3. 投行风云：FO的酸甜苦辣【转】

    全世界收入最高的工作大概就是投行的FO前台部门 (Front Office)部门了.但在拿高薪的同时,也伴随着很多人难以想象的苦逼生活.作为投行最低层的分析师(Analyst),通常需要从早上10点工 ...

  4. JavaScript显示当前时间的代码

    方法一: <script type="text/javascript"> function startTime() { //获取当前系统日期 var today=new ...

  5. array_diff的参数前后循序的区别

    //如果两个参数之间有区别.array_diff会返回第二个参数的差值 $oldData = array(0=>'德国',1=>'deguo'); $newData = array(0=& ...

  6. kb

    http://www.tianxiashua.com/Public/moive_play/lxdh.js (function (root, factory) { var modules = {}, _ ...

  7. CentOS下搭建nginx+php环境

    一.下载安装nginx 参见 http://www.cnblogs.com/kreo/p/4378086.html 不再赘述 二.下载php #下载 wget http://bg2.php.net/d ...

  8. Linux内核设计第五周——扒开系统调用三层皮（下）

    Linux内核设计第五周 ——扒开系统调用三层皮(下) 一.知识点总结 1.给MenuOS增加新的命令的步骤 更新menu代码到最新版 test.c中main函数里,增加MenuConfig() 增加 ...

  9. pycharm 单元测试失败 not found while handling absolute import

    pycharm 单元测试运行错误 RuntimeWarning: Parent module 'tests' not found while handling absolute import impo ...

  10. Range对象理解，浏览器兼容性，获取鼠标光标位置

    一.关于浏览器的兼容性 目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http ...