flowplayer / flowplayer Goto Github PK

View Code? Open in Web Editor NEW

1.9K 182.0 472.0 3.11 MB

The HTML5 video player for the web

License: Other

Ruby 2.10% JavaScript 54.74% Shell 0.06% Makefile 0.77% ActionScript 16.52% HTML 16.24% Gherkin 2.25% Sass 7.32%

flowplayer's Introduction

Flowplayer

Note! This archived repository contains the old open-source player called Flowplayer 7. Merely for history purposes.

For more recent offerings consider visiting our website.

website | demos | docs

For the impatient

Download Flowplayer
Unzip
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

Download Open Source Flex SDK, v4.5.1

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

flowplayer's People

Contributors

Stargazers

Watchers

Forkers

kennylerma taytus dgamma3 alexey-raspopov sathyanarayananm c326277320 haibocheng jlabresh1 pareshr fredxinfan beowa psramkumar mibamur gbicou phloxic hooface clever--code qianjiang hadifarnoud frisocki sagheer yhtsnda mkmd strategicgains erls-corporation casualuser notoriousre-i-d chrislusted rpontes scozmcluc stevewithington cxp chu888chu888 sidekickteam vlakoff cstigler juans-zz laudanum widgital isrek tcooc dearjohn jfgratton daverev fishrod-interactive mimocommedia numlocker guna16 quarkmarino lonjoy warin paluh knoppixmeister lushchick psrustik vrdate cfriel palkan mnek84 chiehwen hderms rodincave mrbacon yonngwoo samuelbirch smanne katonada bukalov xiaobaolxy marcolopezs x-itec stpa pradeep94 floki2020 lubberscorrado feulix petemill sanyaade-teachings systom cethap bbarwick-pd gzbillz xewn ryanjadhav jayceefun davgit ones006 digiwurx chinnurtb jackzhang1204 sweetbai sijisunny elasticbrains-dn adtbfrnt jdk2588 mleems httpool sofiamaria errakeshpd zoranjambor

flowplayer's Issues

Duration unit changes to hours:minutes for clips over 1 hour

There is no reason from the viewer's perspective to switch display units after 1 hour. Minutes and seconds are displayed without unit(s), hours and minutes are displayed with 1 unit. It's confusing.

Migrated from flowplayer/work/issues/293

Autoplay on iPad

When viewing a video on iPad, the video auto-plays, even though it is not desired to have it auto-play. I did not specifically set the autoplay attribute.

IE9 throws INDEX_SIZE_ERR when switching/stopping video tags (html5)

I use javascript to swap videos in a container element. That causes IE9 to fail sometimes when currentTime is set to zero. The Player stopped working correctly after that so i wrapped it in try/catch like in the seek function above and it worked again:

      stop: function() {
          try {
              api.currentTime = 0;
           } catch (ignored) {}
         setTimeout(function() { api.load(); }, 100);
      },

poster on iOS

Basic demo:
http://flowplayer.blacktrash.org/fp5/poster.html

works on iPod - iOS 3.1.3 (!)
does not work on iPad1 (feedback Janne)

More diagnostics welcome.

"Retina ready" demo has broken layout on iPad

See screenshot: http://d.pr/i/74jA

license does not validate against idn or punycode domain names

Demos:

idn: http://аудиохрестоматия.рф/1.html
punycode: http://аxn--80aaleoc0aobsmmdd7a0n.xn--p1ai/2.html
embed idn and punycode: http://flowplayer.blacktrash.org/fp5/embed-idn.html

Punycode works in some browsers on some platforms: Safari, Google Chrome, Firefox $MS, but not in IE, Firefox Mac, Opera.

IDN does not work at all.

flowplayer().load(url) does not do anything

Absolutely minimal (temporary) sample:
http://flowplayer.blacktrash.org/fp5/minimal.html

I've tried various more verbose incantations to no avail.

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.

make default locations protocol independent

Can be achieved relatively simply by just omitting the http protocol for the CDN and EMBED variables.

See #6 (comment)

issue with buffering and buffering level stretching screen

this is not something I can provide a link to (internal project), but if you have the following css in your script (for nicely fading elements, links etc) it seems to interfere with the buffering animation

{transition: all 0.2s ease;}
(including all vendor prefixes)

errors triggered by invalid clip urls not caught by the api

In the case I give invalid clip urls, I would expect

flowplayer().bind("error", function (e, err) {
  console.log("error code: " + err.code + ", error message: " + err.message);
});

at least to be triggered. I get 404 errors in the console alright, but the error event is not triggered.

For fp3 error 200 stream not found is one of the most addressed errors in api scripts using the onError event.
See: http://flowplayer.org/forum/#!/moot/1462

Full screen doesn't anymore work on iPad

When I upgraded to Flowplayer 5.1.0, it broke the full-screen capabilities in iPad 3/iOS 6.

Although the player controls does go into full-screen mode, the video itself does not scale into full-screen. It remains the same size as the original video.

Multiple Videos on Page - iPad

When multiple videos are on the same page (such as 3 videos), and the page is viewed on iPad, then the third video auto-plays (even though it is not desired to have the video auto-play.

Also, any attempt to click to play the first or second video does not work. Therefore, it is not possible to view any video, except for the third video.

You can see this behavior here:

http://www.shefik.info/

flash engine handling unreliable

I can't test the automatic fallback right now, but forcing flash preference in the configuration does not work:

flowplayer.conf = {
  engine: "flash"
}

yields a TypeError:

TypeError: c.swf is undefined   
...c.logo})));else{var g=$("<a/>").attr("href","http://flowplayer.org").appendTo(b)...
flowplayer.js (line 1654)

Specifying it as data-swf="flash" attribute for the container works.

Additionally specifying an swf location in the config works too:

flowplayer.conf = {
  engine: "flash",
  swf: "/5.0.0/flowplayer.swf"
}

Version 5.0.0 is Not Working with jQuery.noConflict

Version 5.0.0 is not working with jQuery.noConflict

http://api.jquery.com/jQuery.noConflict/

IE8 error - undefined: Unsupported video

I am getting this error with every video and format I have tried. I have attempted to force data-engine="flash" and also data-swf="flowplayer.swf" both to no avail.

The files I am trying to play are H264 MP4 files, which should work from what I can tell.

Everything works fine in Chrome and Safari.

/flowplayer repository with description of the project

flash version: requires 9.0 correct?

Please double check whether indeed version 9.0 is sufficient - fp3 now requires 10.1, to my layman's understanding because it's written in AS3, but it might be that the minimal feature set of the fp5 flash engine also works with flash 9.0.
Please double check with the fp3 AS gurus.

subtitles not working on IE8

http://d.pr/i/irm7

pause() does not toggle

According to http://flowplayer.org/docs/api.html#methods pause() toggles between pausing and playback. However, it does not.

doc bug or player bug?

Preloading problem

I'm playing a flv file with Flowplayer 5 (swf fallback) with 'preload' attribute. A loading bar is moving, but api.play() method resets the buffer and preloading starts (and play) from begin.

jQuery UI not working when flowplayer included

see: http://jsfiddle.net/KK36F/8/

IE 7, 8, 9 problems

Starting to collect symptoms here.

Centers around: "object does not support this property or method".
http://flowplayer.org/forum/#!/moot/549
http://flowplayer.org/forum/#!/moot/723

Line : 568
character : 16

Line 568 in flowplayer.js is: https://github.com/flowplayer/flowplayer/blob/master/lib/engine/flash.js#L141

Android compatibility

this shall be a wrapper issue to collect working and non-working version / browser combinations.

On my Galaxy Note 10.1 with Android 4.0, the player works fine in mobile Opera and Firefox, but not in the default Android browser or Chrome.

flash engine does not keep aspect ratio in fullscreen (regression)

http://flowplayer.blacktrash.org/fp5/mp4only.html

This was fixed in a previous devel cycle.
Note that the flowplayer logo is also distorted with a 4/3 aspect ratio.

iframe detection causes errors on strict secure sites

For http://www.facebook.com/flowplayer/app_491716327514547 I had to comment out this line:
https://github.com/flowplayer/flowplayer/blob/master/lib/ext/ui.js#L114
because fb prevents access to top.location.href from a script call by the iframe.

I will test whether something like window.top.location prevents the error - I will have to set up a sandbox application though to not disturb the public setup - otherwise we should pass the error completely silently or ideally with a warning only.

What happens now, is that it falls back silently to flash! And there is no debug message which tells me that.

subtitles and seeking

should display a subtitle when you seek between a start and end position

rtmp config missing from embed code

http://flowplayer.org/forum/#!/moot/972

preload="none" makes player stall in loading state

Are some video tag attributes forbidden?

Volume and mute controls don't have any effect

The volume control and the mute button don't do anything on iPad. Tested in dev and in the production site, and it's the same on both.

Not sure if this is even supported on iOS, YouTube's HTML5 player does not have any volume controls.

Does not use custom controls on iPad fullscreen

Testing in dev and with 5.1-dev. Flowplayer's own controlbar is no longer used in iPad's fullscreen.

webkit browsers display horizontal scrollbar when scrubbing

Cannot reopen #3, but:
In all webkit browsers while using the scrubber in this absolutely minimal example (not on fp homepage though):
http://flowplayer.blacktrash.org/fp5/minimal.html
the horizontal scrollbar is displayed.

http://d.pr/i/34hX

Setting Poster Does Not Work

When "poster" is set, it dos not display the image at all.

Can't use php to fetch video file

I have been trying this all day. If I enter the absolute path to my file on my server, it will play just fine. If I use php to fetch the path, I will get "html5: Video file not found".
If I echo the php variable which I use to fetch the path, it is the exact same as the absolute url I can use to play the video - so it has to be the php that flowplayer 5 can't seem to handle.

Complex URL's not working in Flash mode

URL's such as:

http://cdn.http.pri.streamotor.com/1/2/video-sd.mp4?Expires=1350310145&Key-Pair-Id=APKAJUAT6SMTUDSHTR3Q&Signature=fQ2bVVTZDdtoaFscWhdU5NjMOH41cnR0GgoA2YkQYiW3P2MgjuBn0-COh4lVCR~EIpc8tp3-eKzhQH-zH051E8toVdqQxNq0STlympGgnYHHAbnyenhEb0foXGLFIQpCnbLUJbMmKr8OW2VNLPQcTaHwNiJNmmVB0bv7g7~NsIo_

Scrolling to the right on flowplayer.org

This probably isn't a fault of flowplayer itself, but the frontpage on flowplayer.org scrolls to the right on the latest chrome even when there's no horizontal scrollbar.

jQuery UI slider() breaks Flowplayer slider()

Using jQuery UI's slider() function along side Flowplayer will result in an error. I tracked the issue to the fact that both jQuery UI and Flowplayer have a function named "slider". Renaming one or the other seemed to solve the problem.

rtmp: automatic failover to rtmpt as in fp3?

Is that implemented? If not, is it planned? If yes, will there be a configurable failover delay?

See: http://flowplayer.org/forum/#!/moot/1447

api config has no effect

Tested with dev example at http://example.flowplayer.org/flowplayer.js

As per http://flowplayer.org/docs/#configuration

$(".flowplayer").flowplayer({engine: "flash"});

should switch the engine to flash, but it does not.

Migrated from #7. Global config works.

fp-prev, fp-next classes do nothing

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

IE7 script error (line 636)

Clicking 'play' in demo http://example.flowplayer.org/basics/subtitle.html generates JS error in IE7:

line 636, char 16, object doesn't support this property or method

Flash player/mode doesn't work with jQuery.noConflict()

You can easily reproduce this issue with the demo files and eg IE7,8 or forced flash mode. Just insert replace:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

with:


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>jQuery.noConflict();</script>

and the flash player doesn't work anymore. I think you need to replace the $ shortcode in embed.js (or embed.min.js) to solve the issue.

Allow fullscreen and is-closeable simultaneously

http://flowplayer.org/forum/#!/moot/317

ability to load a good url when player fails with a bad one

see:

#44 (comment)

Playlist loading visually broken in 5.1

Hi,
I just updated to version 5.1 because of compatibility problems I was having with jQuery UI, but I have noticed that the visual feedback for loading playlists does not seem to work anymore. In version 5.0 there were these 4 blinking dots, which looked nice. Now, the player flashes back to the "play"-button, and after a few moments begins playing the next video in the playlist. It just has a very broken look to it.

Example: Your own demo page, e.g.: http://flowplayer.org/standalone/playlist/dots.html

I'm using Chrome 22.0.1229.94 on MacOSX Snow Leopard.

Thank you!

poster image distorted in flash mode

http://flowplayer.blacktrash.org/fp5/poster.html

happens even with explicit container size and image of exactly same size (624x260)
also with 5.1.0 devel

Problems on http://flowplayer.org/demos/layout/

In the inlay example, I hit the X to close the video while it was still trying to load the video. The video shrank down and disappeared, but then it started playing and there was an animated loading throbber showing in a seemingly random spot.

Key not working in HTML5 v5.1

Have not changed this part of my setup, but now the flowplayer watermark appears on the HTML5 version (does not appear if Flash is forced).

<div class="flowplayer" data-embed="false" data-key="$my_key">
  <video poster="blah">
    <source type="video/mp4" src="blah"/>
  </video>
</div>

feature: make playlist available in api

e.g. to query index in cuepoint, see: http://flowplayer.org/forum/#!/moot/253

conf.errors undefined

Error messages do not appear because if an error happens conf.errors is undefined.

Offending line: https://github.com/flowplayer/flowplayer/blob/master/lib/ext/ui.js#L185