Videogular - Is there a script for multiple video play buttons?

Question

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

Answer 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.