The HTML5 video player for the web

Overview

Flowplayer

website | demos | docs

For the impatient

  1. Download Flowplayer
  2. Unzip
  3. Drop the folder under your server

Minimal setup

<!DOCTYPE html>

<head>
   <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

   <!-- flowplayer.js -->
   <script type="text/javascript" src="flowplayer.min.js"></script>

   <!-- player styling -->
   <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">

</head>

<body>

   <!-- player 1 -->
   <div class="flowplayer">
      <video src="my-video.mp4"></video>
   </div>

   <!-- player 2 -->
   <div class="flowplayer">
      <video>
         <source type="video/webm" src="my-video2.webm">
         <source type="video/mp4" src="my-video2.mp4">
      </video>
   </div>

</body>

API Samples

// listen to events on second player
flowplayer(1).bind("load", function (e, api, video) {

}).bind("pause", function (e, api) {

});

// work with jQuery
$(".flowplayer").bind("unload", function (e, api) {

});

Compiling Flash

export mxmlc=<PATH_TO>/flex_sdk_4.5.1.21328_mpl/bin/mxmlc
cd ./flowplayer # this repository
make flash

Reporting bugs

Please read the contributing guidelines before reporting issues or submitting patches.

Running tests

Our automated test suite is sponsored by BrowserStack. Thanks you!

Running locally

Tests are run on BrowserStack

  • Install dependencies: bundle install
  • Setup broserstack tunnel: java -jar features/support/BrowserStackTunnel.jar -f <your tunnel api key> /path/to/flowplayer/repo
  • Run cucumber features: rake username=<browserstack username> key=<broserstack automate api key> base_url=http://<something>.browserstack.com

License

GPL v3 with an ADDITIONAL TERM per GPL Section 7

Copyright (c) 2012 Flowplayer Ltd

Comments
  • CloudFront signed URL with urlencode

    CloudFront signed URL with urlencode

    Hi there,

    If I try to urlencode my CloudFront signed URL (I need to do it if my filename has special chars, like blank space "my video.mp4"), then FlowPlayer won't play the stream.

    Example here: http://vod.dryss.com/w/django/lecteur-video.html

    I'm unable to start video on Firefox / Chrome.

    Any idea how to make it works?

    Thanks

    opened by DrySs 114
  • FP7 - DVR time

    FP7 - DVR time

    There is a problem with time counter (on the left) during playing live stream with DVR. If time of record is litmited on the server (eg to 1 hour) and user is playing stream longer, he can rewind video before server record. Player is going back to live in this situation, but it is confusing for users. Time on the should be updated or stopped when max DVR record is reached. It will much easier for users when time to rewind will shown during mouseover event with timeline.

    opened by popler 74
  • playlists do not play through in Safari and IE

    playlists do not play through in Safari and IE

    Just try http://flowplayer.org/standalone/playlist/basic.html I can confirm for old Safari 5, but user reports also for Safari 6 and IE8 (but not consistently): http://flowplayer.org/forum/#!/moot/1770

    opened by phloxic 45
  • load/play restrictions

    load/play restrictions

    Currently load() and play() fail when: a) an engine switch is involved, for instance html5 -> flash b) a protocol change, for instance rtmp -> mp4 progressive download within flash

    Can these restrictions be avoided? If not we must document them. Currently the docs suggest that it "just works" as long as the browser supports playback of the video(s) given in the argument.

    A switch from mp4 in html5 to hls however works.

    opened by phloxic 44
  • HLS: stream does not work on Android 4.1

    HLS: stream does not work on Android 4.1

    Hi there,

    I've noticed that on Samsung Galaxy S3 Mini (Android 4.1), HLS does not work with FlowPlayer: audio is playing but not video (infinite FlowPlayer loading screen).

    Here is two test pages:

    • simple HTML5 video tag: http://dev.dryss.com/signedcookies/
    • FlowPlayer 6 : http://dev.dryss.com/signedcookiesfp/

    This is the same m3u8 file in both examples, served by a CloudFront distribution with Signed Cookies.

    With simple video tag, it's working fine. With FlowPlayer 6, I have infinite loading screen.

    opened by DrySs 40
  • API Safari 6 Flash detection

    API Safari 6 Flash detection

    Flash detection is currently broken for Safari 6 in similar ways as for Flowplayer Flash: https://github.com/flowplayer/flash/issues/167 Safari 6 (Mac) reports Flash version and description even when Flash is disabled (but installed). We need of course to detect a working Flash engine.

    opened by phloxic 39
  • Flowplayer v5.2.0 doesn't play on the iPad Mini.

    Flowplayer v5.2.0 doesn't play on the iPad Mini.

    Getting a problem with Flowplayer v5.2.0 to not playing on the iPad Mini.

    Tested the same page on various browsers and even in an iPad 2 with the same setting in both iPads. On the mini - the demos pages don't load the sample videos -- all I get are the repeating dots.

    Used this page to test, but others have same issue:http://flowplayer.org/standalone/skins/minimal.html

    Thanks

    ready to test 
    opened by photoman62 39
  • rtmp stream location guess too clever

    rtmp stream location guess too clever

    As far as I can see the rtmp fallback assumes an mp4 file with an identical filename in an identical filesystem (bucket) layout as the http url. There is no way to specify an rtmp filename.

    This will fail in a lot of circumstances for a lot of reasons. For instance:

    • http://flash.flowplayer.org/demos/plugins/streaming/audio-live.html (assume video)
    • http://flowplayer.org/forum/#!/moot/254 or in case of a different rtmp directory/bucket or filename layout etc. etc.

    An option to configure the actual rtmp stream location is needed for the cases where the deriving logic is not applicable.

    ready to test 
    opened by phloxic 37
  • flash mode can't handle utf-8 media locations

    flash mode can't handle utf-8 media locations

    http://flowplayer.blacktrash.org/fp5/utf.html Note that this is _not_ the same as issue #99. But it is probably similar to https://github.com/flowplayer/flash/issues/59 for Flowplayer Flash.

    According to http://flowplayer.org/forum/#!/moot/4074 the otherwise dangerous escaping hack worked - with a few tweaks.

    JWPlayer avoids the problem by not writing any media locations into the object tag.

    opened by phloxic 35
  • window.onload doesn't work on iPad

    window.onload doesn't work on iPad

    Here's a demo site: http://lifeinamovie.com/html/window-load.html

    It uses //releases.flowplayer.org/5.4.2/flowplayer.min.js

    Below the video these messages should appear as the JavaScript event hooks are fired:

    "jQuery(document).ready fired! jQuery(window).load fired! window.onload fired!"

    On iPad ("Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3"), only the first appears (document ready).

    The window.onload is simply not fired and its jQuery equivalent doesn't work either.

    opened by foliovision 32
  • non-splash playlists loop (often omitting last clip)

    non-splash playlists loop (often omitting last clip)

    As #58 is closed, quoting from https://github.com/flowplayer/flowplayer/issues/58#issuecomment-11369378


    However! When you are on the clip before the last one and search towards the end, it jumps over the last one and restarts where it should switch to the last one.


    Depending on the last 2 clips, the list might also loop.

    Demo: http://flowplayer.blacktrash.org/fp5/playlist.html

    As mentioned in #58 playlists work near perfectly in a splash image setup, but now non-splash setups are broken in a different manner.

    I will try to make a proposal to parse the playlist items on load into an array and avoid the click() to see whether this improves things.

    ready to test critical 
    opened by phloxic 32
  • Add single quotes to background-image property

    Add single quotes to background-image property

    If you have a poster/image URL that contains a closing bracket ) it won't be set as the background-image property as it closes the url() property early.

    I have added single quotes the same as is already done a few lines below https://github.com/flowplayer/flowplayer/blob/d5b70e7a40518582287d9b73aa76ea568c948816/lib/ext/ui.js#L485

    An example of a url that does not currently work is.

    https://d17m69v0nrxktd.cloudfront.net/ce2jJLeNlNb8Be2zqQahAm8tV98=/1170x656/filters:quality(60)/video_thumbnails/2140/593fa756586e5_0016.jpg

    opened by MaxGiting 0
Owner
Flowplayer
Flowplayer
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

WordPress-Plugin-SrsPlayer SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc. Usage First, you should get your own video stream

ossrs 3 Jul 27, 2022
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

ossrs 12 Oct 15, 2022
Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

PayPal 2.4k Jan 5, 2023
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Aim Mikel 2 Jun 27, 2021
Music-Player - Music player application built with HTML, CSS and vanilla JavaScript

Music-Player Music player application built with HTML, CSS and vanilla JavaScrip

Karthik Umashankar 1 Feb 10, 2022
An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.

Stem Player Online An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player. https://stemplayeronline.com See the proj

Luke Weiler 23 Nov 13, 2022
Movie focused HTML5 Player

Movie focused HTML5 Player

Bruno Vieira 1.6k Dec 29, 2022
A simple HTML5, YouTube and Vimeo player

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. Checkout the demo - Do

Sam Potts 23.1k Jan 3, 2023
HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript

umataste HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript Feature Playback for fmp4 stream Extremely low latency of less than 0.1 second

もにょ~ん 5 Oct 21, 2022
Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

Paul 1 Dec 29, 2021
Custom full screen video player

Video Player Native video player in html View Demo · Report Bug · Request Feature About The Project This is a custom video player for the web built on

Oscar Castaneda ⬢ 5 Feb 3, 2022
a video player framework aims to bring wonderful experience on browser

Chimee English | 中文 Introduction Chimee is a web video player created by the Qiwoo Team. It's based on the web video element. It supports multiple med

ChimeeJS 2.4k Dec 22, 2022
A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

`JSThread` to `JSThread`, `UIThread` to `UIThread`. React Native Reanimated Expo Player 100% written in Typescript video player component, interaction

Alan Toa 58 Jan 4, 2023
Video Player

aksVideoPlayer.js Video Player View the Demo on CodePen → Getting Started Compiled and production-ready code can be found in the dist directory. 1. In

Ahmet Aksungur 5 Oct 22, 2021
jPlayer : HTML5 Audio & Video for jQuery

jPlayer : HTML5 Audio & Video for jQuery Gitter Support for Zepto 1.0+ compiled with the data module. What is jPlayer? jPlayer is a jQuery/Zepto plugi

jPlayer 4.6k Dec 27, 2022