videogular / videogular Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 353.0 51.55 MB

The HTML5 video player for AngularJS

Home Page: http://videogular.github.io/videogular/

License: MIT License

JavaScript 82.69% ApacheConf 3.65% HTML 8.38% CSS 5.16% Shell 0.11%

videogular's Introduction

Videogular for AngularJS (1.x)

![Gitter](https://badges.gitter.im/Join Chat.svg)

Videogular is an HTML5 video player for AngularJS. Videogular is a wrapper over the HTML5 video tag, so you just could add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

You could see a demo here: www.videogular.com

Angular (2+) Support

Videogular2 is under active development and will be available with Angular 2+. Videogular2 will follow the same philosophy and we're open to discuss any possibilities. If you want to contribute you can open a new issue with your suggestions or clone the repository to make pull requests.

You can find a demo here: https://videogular.github.io/videogular2-showroom/#/

And this is the development repository: https://github.com/videogular/videogular2

Why Videogular?

We're developing Videogular focusing on mobile devices and HTML5 video special capabilities. Videogular brings to you these key features:

Bindable properties: Videogular's directives are bindable, just try the demo and play with bindings.
Extendable through plugins: Thanks to our API you can develop your own plugins.
Theme based: Customize it with your own themes and change between them on the fly.
Native fullscreen support: Enjoy with native fullscreen support for Chrome, Firefox, Safari, iOS and Chrome for Android.
Mobile support: Videogular can detect mobile devices to show/hide components in case that aren't supported. Also, you could use it in your responsive websites, Videogular will always scale to fit its container.

Documentation and how to install

** Important information:** Bower repositories have been deprecated. Now all modules are available inside the same npm package:

https://www.npmjs.com/package/videogular

Simply run npm install videogular. Then import the desired features from the dist directory.

See the Videogular's website for more info about how to start and installation notes (beware that this is presently out of date). We have also tutorials and examples if you need a guide or code samples.

For more info you can check the full Videogular API documentation.

Running and building

To run the project and create the minified and debug files just run grunt.

This will run the tests and if everything works as expected it would create a build folder on root.

Third-party plugins

If you have developed a Videogular's plugin or theme contact us through this form and we will add you to this list.

Youtube plugin by NamPNQ
Quiz plugin by NamPNQ
Flash fallback plugin by NamPNQ
Background video plugin by panurge-ws
Videogular subtitle plugin (for Videogular 0.4.0) by farhan-repo
Videogular Cuepoints plugin by HarryCutts (not to be confused with the later Cue Points feature)

Migrate to 2.0 from an older version of Videogular

Use of the videogular package on NPM is now the preferred method of distribution. This now includes all of the features that had previously been distributed separately. Simply import the features that you desire into your build.

Migrate to 1.0 from an older version of Videogular

All attributes for the various directives (including plugins) are still being maintained as usual, however, the naming of several have changed significantly to conform to an improved coding style. Here is a semi-exhaustive list:

No more <vg-video>. Ditched in favor of <vg-media> that supports audio as well.

vg-controls:

vg-timedisplay -> vg-time-display
vg-scrubBar -> vg-scrub-bar
vg-scrubbarcurrenttime -> vg-scrub-bar-current-time
vg-timedisplay -> vg-time-display
vg-mutebutton -> vg-mute-button
vg-volumebar -> vg-volume-bar

vg-poster-image -> vg-poster

For a complete migration guide we recommend you to check the Migration guide to Videogular 1.0.0.

Supported by

Videogular team would like to thank all of our generous sponsors who support this project:

Credits

Videogular is an open source project maintained by (literally) two fucking developers.

We want to thank all our contributors: Raúl Jiménez, Robert Zhang, Javier Tejero, Marcos González, Rafał Lindemann, Alberto Tafoya, Sergey Okhotnitski, Javier Cejudo, Sam Lau, paxal78, Raymond Klass, Harry Cutts, Chris MacPherson, stefanvonderkrone, Emil Ibatullin, Uzair Sajid, pavelnikolov, Frank3K, EmilioAiolfi, Bernhelm, Morriz, Chris Funk, Johann Beishline, edisonh, Nainterceptor, Max Maes, pire, Davin Kevin, bkuzma, VanVan, Kevin Feinberg, Jonathan Asquier, Centsent, Zane McCaig, Nils Thingvall, Tim Costa, Alex Wilde, jarrodlytle, daviddk , Artem Medvedev , super-ienien , Jared Fox and our bug submitters.

Changelog

Here you can see the complete changelog

videogular's People

Contributors

Stargazers

Watchers

Forkers

elecash zmilan wobo-abhishek-zz singlaripu jaredwilli joeromero javiertejero terryx hengkiardo soloweb bradbatt gitlisted morozd robbestad cdoru gion artignan emanuelmiranda83 lv88h themelogik marg51 rakesh-mohanta imclab kublaj dreizle neverland panrafal cdsgoncalves visnetodev cybernetics keatonorey davgit michalox dbongo nampnq tguyard joefatora swaroopgn yanivefraim mattemcee nvdnkpr otechnology jlmwebhosting lanbin guins withattribution davidohalloran dghijben mallikvala michapixel stolzem swapnavi mikelockz 5erg hanneshentzschel senhordim cevic sonu-sj remigr dabontv sohamkhare hihihippp candycchuan iloveking yangningbu mdlawrenceusa milram bnnadi lukeddy allenmachary levelsbeyond giorodriguez is00hcw samzhao marufsiddiqui bridge-athletic lucas-solutions lonid juliosalvat paxal78 schmooie jonathanimo jianhe25 kaiqigong isbouzidi danpe asnoakes faisalal-tameemi radzikowski muzalu raymondklass adchir ainternational efcar travisrussi schup vrigzalejo katiastrop lane sdbeng

videogular's Issues

Stretch Mode doesn't work

any Stretch Mode doesn't work..I need to stretch my video..
autoPlay doesn't work too..

chrome - linux mint 15

Videogular Roadmap

We've moved our Roadmap to Trello!!

https://trello.com/b/x4YTrcP5/videogular-roadmap

video displays small on ios7

The video object is ok but the video itself does not scale to the size of the video object

Video with a Fallback to Flash

need support for playing videos on all browsers, of course this does not exclude Internet Explorer. Is there any way to add a Flash fallback, in the event that browser not have support for HTML 5 video?

Minified version of the JS

Is there a minifed version of js also available or we need to do it on our own?

destroy player object ??

on page load 1st time player works fine ( except the scrubber )

but when i navigate to another page and come back the bindable variables are not set and video starts playing automatically with {{ config.variable }} hovering over the video.

Any solution to this ?

Volume problems with Firefox

When we click on volume bar Firefox is scaling volume bar incorrectly.

bug in vgScrubbar directive -> VG_UTILS.fixEventOffset

hi!

I tried your player and discovered the error when working in FF (v 23:

service: VG_UTILS, metod:fixEventOffset
code:
$event.offsetX = $event.layerX - $event.currentTarget.offsetLeft;
not work... $event.layerX - undefined...

i use this code:

if (navigator.userAgent.match(/Firefox/i)) {
// $event.offsetX = $event.layerX - $event.currentTarget.offsetLeft;
// $event.offsetY = $event.layerY;
var e = $event || window.event;

                                var target = e.target || e.srcElement,
                                    rect = target.getBoundingClientRect(),
                                    offsetX = e.clientX - rect.left,
                                    offsetY = e.clientY - rect.top;
                                    $event.offsetX = offsetX;
                                    $event.offsetY = offsetY;
                               // console.log([offsetX, offsetY]);
        }

        return $event;

its work

iOS problems with video stretch

It seems that video is not resizing in iOS 6 devices.

Flickering on controlbar at init

Controlbar appears on top of Videogular on first load.

Seek without pausing

Nice work!

Is it possible to seek without pausing?

I used videojs with youtube before and it was quite responsive once the video is loaded. Especially with the youtube plugin I get a black screen during seek...

Best,

Nils

Renaming link function parameters

Hello, I saw the code a little bit and I have my recommendations.

your link functions are like this:

link: function($scope, $element, $attrs, $controller) { ... }

the link function doesn't inject stuff, they are normal parameters.

link: function(a, b, c, d) { ... } would work the same, obviously they are not descriptive.

Even when your parameters names are technically correct, people could confuse them with injectable parameters.

The convention that developer uses is:

link: function(scope, element, attr, ctrl For the controller I have seen ctrl, controller, fooCtrl (where foo is the name of the required controller).

On the other hand, the wiki talks about plugin creation, and you use there $API for the ctrl. Normally you don't want to put a $ to prefix your stuff, that is just for Angular built-in stuff.

Feel free to dump this issue. They are just random thoughts on a quick look.

On the other hand, good work 👍

Please add bindingable video src, add tech priority, api state buffering

Not able to make Video Player work

I tried various options but some how not able to make Html5 video tag work with angularjs.

My source code:

<videogular vg-width="vpConfig.width" vg-height="vpConfig.height" vg-theme="vpConfig.theme.url" vg-responsive="vpConfig.responsive">
    <video class='videoPlayer' preload='metadata'>
        <source ng-src="{{CurrentModule.mp4}}" type="video/mp4">
        <source ng-src="{{CurrentModule.webm}}" type="video/webm">                        
    </video>
</videogular>

I am getting following javascript error and video never plays. (in all three browsers Chrome IE, Firefox )

I tried normal html5 video tag but getting same error. I am using AngualrJS 1.2.14

Thanks & Regards
Pinal Bhatt

Unable to load poster template

Hello,

When I add this inside videoangular directive:

I have got this console error log:

Error: [$compile:tpload] Failed to load template: views/videogular/plugins/poster/poster.html

I see that the browser is making a http get request on http://oller2.local/app_dev.php/views/videogular/plugins/poster/poster.html

And I need that this request points to /views/videogular/plugins/poster/poster.html is this possible? Thx.

Youtube/Vimeo Plugin

Could it be possible to integrate Youtube source video in Viedogulatr like this plugin for videojs do ?
https://github.com/eXon/videojs-youtube

Expose "vg" api as "API"

For clarification we should expose "vg" api as "API".

https://github.com/2fdevs/videogular/blob/master/app/scripts/com/2fdevs/videogular/videogular.js#L315

A better solution would be $scope.API = vg;

Question: Why do you use videoElement[0] everywhere and not just videoElement

I have noticed in videogular.js file that in pre function there is a definition of videoElement is done:

controller.videoElement = controller.elementScope.find("video");

But you only use first element everywhere like:

* controller.videoElement[0]
* this.videoElement[0].currentTime
* this.videoElement[0].paused
* vg.videoElement[0].addEventListener ...

and so on. the only places where it was not in this manner is assigning css:

* vg.videoElement.css("width" ..
* vg.videoElement.css("height" ..

The reason for this is not obvious for me, why you could not initialliy in pre function assign this element as videoElement like:

controller.videoElement = controller.elementScope.find("video")[0];

Change videogular's width/height

User @goldalworming request how to change videogular's width/height dynamically.

Scrubbing makes noise

When you are scrubbing it makes a weird noise because it's playing. Scrubbing should pause, and when you stop scrubbing, play again (only if the video was playing when scrubbing).

directive vgSrc is not present

When installing Videogular with Bower ('bower install videogular'), the main file (videogular.js) is incomplete, it's missing the directive vgSrc, which is pretty important, since without it, you cannot play any video.
After I replaced the file installed with Bower with the one from GitHub (this project), the video finally played.

Unexpected scaling behavior.

Hi,

I encounter some unexpected behavior when using videogular with the config setttings responsive=true and stretch=fit. When the browser is in landscape mode the player doesn’t seem to adjust the maximum height correctly, causing the bottom of the video and the controls to disappear from the viewport. In portrait mode I would expect the video to vertically center with the controls at the bottom of the viewport. I made some efforts to correct the behaviour in my own project, but I'm afraid I'm not clever enough to fix it in the videogular source code. Anyway, I would appreciate if you could take a look at the issue.

To clarify I included the following screenshots of a video with 4:3 ratio:

videogular-landscape expected behaviour:

videogular-landscape current behaviour:

videogular-portrait expected behaviour:

videogular-portrait current behaviour:

Initializing problems on iOS 6

iOS 6 is not properly initializing the video player, the player is not scaling and autoplay doesn't work.

Fullscreen mode on non-supported devices

There are a lot of devices/browsers that doesn't support native full screen, Videogular should take videogular tag and fill the browser to have the best experience on those environments.

Controls show Play button on autoplay

Having an issue when I set the video to autoplay on load, it plays but it still shows the play button and not the pause button.

Thanks

Seek time in a function with multiple videogular on one page

Hey !
I am doing a project where I use videogular and I have a question.
I have a page with videogular called in a ng-repeat loop. And everytime I have some links that should move the video to a defined time.
I saw that there is the seektime() function, but could you explain to me how this work ? I would like to do something like ng-click="seekTime(x)", is it possible ? I am not so experimented so I am a bit lost.
Thank you very much.

Expose API as scope functions

This should fix limitations when trying to access to complete events from view controllers.

More info in this SOF question: http://stackoverflow.com/questions/20556908/interacting-with-the-videogular-directive-how-to-do-so/20561682#20561682

Question about viewing youtube videos

Is there a way to use this project in conjunction with youtube?
Can you provide an example to setting it up?
I am currently using this repo for youtube and video.js but I would love to be able to have an more Angular approach.

Thanks!

Unable to seek local video under Chrome 29.0.1547.57, MacOSX 10.8.4

Serving the example from localhost with node-js http-server, Chrome 29.0.1547.57, MacOSX 10.8.4

When I click the scrubbar, the video pause for a very short moment and continue playing at current time. It does not jump to where I clicked. Dragging is not working either.

Sometimes I get the following error in console

Error in event handler: IndexSizeError: Index or size was negative, or greater than the allowed value. event_bindings:325
Event.dispatch_ event_bindings:325
Event.dispatch event_bindings:340
dispatchOnMessage

But it works fine when I replace the video from assets/videos/oceans-clip.mp4 to http://video-js.zencoder.com/oceans-clip.mp4

And it works fine under Safari.

It works fine when I access the your demo page

Erro Injector

Hi guys!
I tried added this library, but:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=jukebox&p1=Error%3…js.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3Dcom.2fdevs.videogular%26p1...<omitted>...5)

html.....

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.14/angular-resource.min.js"></script>
<script src="js/index.js"></script>
<script src="js/services.js"></script>
<script src="/js/com/2fdevs/videogular/videogular.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/youtube.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/buffering.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/controls.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/ima-ads.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/overlay-play.js"></script>
<script src="/js/com/2fdevs/videogular/plugins/poster.js"></script>

app.js

var jukebox = angular.module('jukebox',['jukeboxFilters',
   "com.2fdevs.videogular",
    "com.2fdevs.videogular.plugins.controlbar",
    "com.2fdevs.videogular.plugins.overlayplay",
    "com.2fdevs.videogular.plugins.buffering",
    "info.vietnamcode.nampnq.videogular.plugins.youtube"
    ]
)

Not work for me :/

config width and height are not working

When I set a default width and height in the config and bind it to vg-width and vg-height, the width and height are always overwritten by the actual width and height of the videofile. This is not what I expect, but please correct me if I'm wrong here.
The only way I could find to set the width and height, is to change them inside the onPlayerReady event handler. But the downside of this method is that first the window loads with the width and height of the video file and then it gets resized. Is there another way to override the actual size?

Problems when two videos on the same page

Videogular is not working when there are two instances in the same page.

Autoplay not working - gets stuck in an endless "circle of doom" buffering icon

When setting $scope.config.autoPlay (binded to vg-autoPlay property) to true, videogular gets stuck on the "circle animation". The one that normally fires when the player seeks / buffers.

Unfortunately, no errors returned in my Chrome Console when this happens.

Endless buffering / no controls on example page in FF 25

^
On page load, you get the loading spinner endlessly. controls are not displayed. clicking starts the video, click again will pause and display play button. still no controls.
controls not displaying might be a consequence of video endlessly buffering, because they are in the dom

fullscreen

not sure this is an issue fullscreen works perfectly , when the browser page is the parent.

One thing I'm trying to do is have my page work in an iframe. When trying this I noticed fullscreen wouldn't work from within an iframe .

I'm loving Videogular keep up the great work

Seeking video returns "Error: An attempt was made to use an object that is not, or is no longer, usable."

If video has not yet been played, the "Error: An attempt was made to use an object that is not, or is no longer, usable." is fired for the line that calls seekTime() function.

However, if video is played, either through click on play control / overlay or through play() API call first and then call seekTime(), videogular works as expected - seeks to the position specified in seconds.

I make the seekTime() call from a directive, here's the main snippet:

$scope.click = function($mark) {
                if ($scope.videoScope.isPlayerReady()) {
                    $scope.videoScope.play();
                    $scope.videoScope.seekTime($mark);
                }

I used play() here to make the player play first and then seek, thinking problem was that video had to be playing before seeking, but no. Video starts playing, then the error is raised, however, if I click again, then the video will seek to the specified position as expected.

The videoScope ref is taken from the OnPlayerReady event and binded to the directive.

$scope.onPlayerReady = function(API) {
            $scope.videoApi = API;
        };

Videogular themes

Hi guys,
I'm trying to use your module and it looks good so far. But the way you manage themes seems to me quite unclear.
First off, why is it mandatory to set the vg-theme argument ? if you don't do so, it will auto append a stylesheet with an undefined url. Doesn't look like a severe issue but, that's the way you manage stylesheet inclusion and removing that looks messy.
Instead of plain overrides why not build something based on css classes ?
In my case, I bundle all of the css of my app once. I never load extra stylesheet afterwards, I just don't want this to happen.

Error With New Update + Bower

I know that this weekend videogular was updated for bower management.

Since this morning running "bower update" or "bower update videogular"

I get

bower ENOTFOUND Package videogular not found

Something happen? :)

Controlbar is hidden on load

If we're setting a vg-theme through a scope variable, seems that controlbar is hidden.

It seems to be something about cache and loading process, because with a refresh appears again and it works as expected.

Don't work on Firefox

Don't work on Firefox :/

Add autoplay

User @goldalworming requested an autoplay feature.

No Controls after Resizing

I have my Videogular set to responsive mode but when I test that by resizing my window, the video is slightly zoomed in and no controls show up. I can still play the video by right-clicking and selecting Play. Did I mess something up?

Rethink the name "videogular"

This may seem unimportant, but "videogular" is pretty difficult to remember, at least for me. I tried to get to the page with browser autocomplete, but always failed. It's not very intuitive that after video comes "gular", because it not really represents "angular". I think "vidangular" would work much better. Just my 3 cents.

vgSrc directive does not seem to work on Safari 5.1.7 [Win8]

https://github.com/2fdevs/videogular/blob/master/app/scripts/com/2fdevs/videogular/videogular.js#L685

directive("vgSrc", ["VG_EVENTS", "VG_UTILS",
        function(VG_EVENTS, VG_UTILS) {
            return {
                restrict: "A",
                link: {
                    pre: function(scope, elem, attr) {
                        var element = elem;
                        var sources;
                        var canPlay;

                        function changeSource() {
                            for (var i = 0, l = sources.length; i < l; i++) {
                                canPlay = element[0].canPlayType(sources[i].type);

                                if (canPlay == "maybe" || canPlay == "probably") {
                                    element.attr("src", sources[i].src);
                                    element.attr("type", sources[i].type);
                                    break;
                                }
                            }

                            if (canPlay == "") {
                                scope.$emit(VG_EVENTS.ON_ERROR, {
                                    type: "Can't play file"
                                })
                            }
                        }

                        scope.$watch(attr.vgSrc, function(newValue, oldValue) {
                            if (!sources || newValue != oldValue) {
                                sources = newValue;
                                changeSource();
                            }
                        });
                    }
                }
            }
        }
    ]);

Error is thrown on line 685 in Safari:

'undefined' is not a function (evaluating 'element[0].canPlayType(sources[i].type)')

But the player works on Safari on iPhone5s.

Any pointers how to fix this / know issue?

Thank you.

Improve fixEventOffset

Using $event.currentTarget instead $event.target working best, if element has children. In this case $event.currentTarget it is element with binding event and $event.target(source event) child of $event.currentTarget. And if child has left offset and top offset then offsetX and offsetY calculate wrong.

Sorry for my english.

$scope.onButtonPressed = function() {
        $scope.API.pause();
        $scope.API.seekTime(0);           
};

This throws the "$apply already in progress" error.

The following code does not throw any error, but seems very dirty.

$scope.onBackPressed = function() {
    setTimeout(function() {
        $scope.API.pause();
        $scope.API.seekTime(0);           
    }, 10)
};

Video source die

http://videogular.com/views/assets/videos/videogular.webm