0

I have Videogular running in Wordpress. The Wordpress site is my online portfolio and I'm using Videogular to play four, five or six video examples my AfterEffects work. I want a play button or 'swap video' button for each AfterEffects example of my work. I've got AngularJS running separate to Videogular in Wordpress so the multiple play buttons could be built inside or outside Videogular. But I'm not sure what to use to built the play/swap video example buttons for the Videogular player. Should I use AngularJS / jQuery or Javascript? I'm new to AngularJS and my jQuery is stronger than my JavaScript. Can anyone please point me in the right direction? Many thanks!

KSQ

elecash
  • 925
  • 7
  • 11
ksqInFlight
  • 1
  • 4

1 Answers1

1

You should use AngularJS, definitely.

Right now there's a bug if you want to change the src in a video with bindings, however you could do that with simple javascript.

Although you should not make dom transformations in your controller I think that you could make an exception here.

In your controller main.js you must create a function to set the video:

$scope.videos = [
    {url: "http://www.videogular.com/assets/videos/videogular.mp4", type: "video/mp4"},
    {url: "http://www.videogular.com/assets/videos/videogular.webm", type: "video/webm"},
    {url: "http://www.videogular.com/assets/videos/videogular.ogg", type: "video/ogg"}
];

$scope.onClickVideo = function(id) {
    $scope.setVideo(id);
};

$scope.setVideo = function(id) {
    var sourceElement = angular.element("videogular video");
    sourceElement[0].src = $scope.videos[id].url;
    sourceElement[0].type = $scope.videos[id].type;
};

Because you're setting the video file directly to your video tag you can't have any source tag in your videogular directive:

<videogular vg-width="config.width" vg-height="config.height" vg-theme="config.theme.url" vg-autoplay="config.autoPlay" vg-stretch="config.stretch.value" vg-responsive="config.responsive">
    <video preload='metadata'>
        <track kind="captions" src="assets/subs/pale-blue-dot.vtt" srclang="en" label="English" default></track>
    </video>
    <!-- more directives -->
</videogular>

You should take into account that maybe you should control video sources for each browser and OS, because you only can set one video file.

elecash
  • 925
  • 7
  • 11
  • Thank you for this. Much appreciated. But I don't get it yet. I've added the function script to 'main.js' and changed to the above. Now I get a blank screen. I don't understand how to apply the array to an series of buttons for each video. It's me, not you. I'll check out your information on coding the API but I'd be grateful if you could at least tell me why I've just got a blank DIV where is having applied the above. Whereas before I had the player and it was loading mp4's. Many thanks again. – ksqInFlight Dec 18 '13 at 17:36
  • Are you using the same files that you could find at Github? https://github.com/2fdevs/videogular/tree/master/app Your `main.js` should look like this https://github.com/2fdevs/videogular/blob/master/app/scripts/controllers/main.js but with the functions that I've added above. – elecash Dec 18 '13 at 20:43