nampnq / bower-videogular-flash Goto Github PK
View Code? Open in Web Editor NEWVideogular `flash` plugin repository for distribution on `bower`
License: MIT License
Videogular `flash` plugin repository for distribution on `bower`
License: MIT License
I have my video Tag:
source src="{{video.source}}" type="video/flv"
In getSource i debug like this:
if (n.nodeType == 1 && n.tagName.toLowerCase() == 'source') {
console.log(n);
src = n.getAttribute('src');
console.log("src: "+src);
type = n.getAttribute('type');
console.log("type: "+type);
and i get:
source src="/xyz.f4v" type="video/flv">
src:
type: video/flv
sometimes the src is set. But most of the time it isn't. Timing problem with Angulars scope? How can i fix this?
Also, it don't load again if i change video.source
First off, thanks for this plugin!
When I add the vg-flash-player directive, it properly uses the flash player. However, this bypasses the HTML5 video player options if it is available. Is it possible to use the pure HTML5 video player if it is supported and only fall back to the flash option if the HTML5 video player is not available?
This is my markup -
<videogular>
<vg-media vg-src="videoConfig.sources" vg-flash-player vg-preload="'auto'"></vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-poster vg-url='videoConfig.plugins.poster'></vg-poster>
</videogular>
Hi,
is there any solution to get the fallback work even if you set the source afterwards (no source tag in video)? Do you need swfobject or something else get this plugin working (I got js errors without)?
Thx & great work
Hey,
Is that possible to update the plugin to make it work with the last Videogular version?
Thank you!
EDIT : I was able to make some changes to the code, but now I can't fix that error :
API.mediaElement[0].vjs_setProperty("eventProxyFunction", "onSWFEvent");
Uncaught TypeError: undefined is not a function
API.mediaElement[0] is referring to HTML element.
if one uses the buffering plugin as well as your awesome flash fallback the buffering will keep spinning until the user presses play.
I don't know to which repo should I add a pull request since you need to issue an event but the videogular buffering needs to listen...
I solve the problem locally with this:
vcVideoModule
.config([
'$provide',
function ($provide) {
$provide.decorator('vgBufferingDirective', function ($delegate) {
var vgBufferingDirective = $delegate[0];
var originalLinkFn = angular.copy(vgBufferingDirective.link);
vgBufferingDirective.compile = function () {
return function ($scope, elem, $attrs, API) {
originalLinkFn.apply(this, arguments);
var spinner = angular.element(elem[0].getElementsByClassName("loadingSpinner"));
function hideBuffering() {
spinner.addClass("stop");
elem.css("display", "none");
}
API.$on('loadedmetadata', hideBuffering);
};
};
return $delegate;
});
}]);
vcVideoModule
.config([
'$provide',
function ($provide) {
$provide.decorator('vgFlashPlayerDirective', function ($delegate, $window) {
var vgFlashPlayerDirective = $delegate[0];
var originalLinkFn = angular.copy(vgFlashPlayerDirective.link);
vgFlashPlayerDirective.compile = function () {
return function (scope, elem, $attrs, API) {
originalLinkFn.apply(this, arguments);
var originalEventHandeler = $window.onSWFEvent;
$window.onSWFEvent = function (playerId, eventName) {
originalEventHandeler.apply(this, arguments);
if (playerId == "videoPlayer_" + scope.playerId) {
if (eventName == "loadedmetadata") {
scope.$parent.$broadcast('loadedmetadata');
}
}
};
};
};
return $delegate;
});
}]);
i am getting below mention error. i guess it because the flash.js is called before the API is assigned value in onPlayerReady()
$scope.API = null;
$scope.onPlayerReady = function(API) { $scope.API = API;};
After $scope.initfunction it call flash.js and it is getting API source as null.The error which i got is as below
TypeError: Cannot read property '0' of undefined
at getSource (flash.js:153)
at init (flash.js:54)
at angular.js:17782
at e (angular.js:5490)
at angular.js:5762(anonymous function) @ angular.js:12416b.$get @ angular.js:9203(anonymous function) @ angular.js:17785e @ angular.js:5490(anonymous function) @ angular.js:5762
so is there any solution for it.i want to play all the video format in videogular (YouTube, mp4,.swf,.FLV)
I'm trying to set up this flash fallback for the videogular directive and am having a little trouble. I'm seeing this error in my console:
init flash.js:57
flash.js:144
TypeError: Cannot read property 'createCSS' of undefined
at createSWF (http://127.0.0.1:9000/bower_components/videogular-flash/flash.js:145:46)
at init (http://127.0.0.1:9000/bower_components/videogular-flash/flash.js:58:33)
at http://127.0.0.1:9000/bower_components/angular/angular.js:13515:28
at completeOutstandingRequest (http://127.0.0.1:9000/bower_components/angular/angular.js:4098:10)
at http://127.0.0.1:9000/bower_components/angular/angular.js:4404:7
Any help would be appreciated - thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.