nampnq/bower-videogular-youtube

Videogular `youtube` plugin repository for distribution on `bower`

bower-videogular-youtube's Issues

Not enough arguments to EventTarget.removeEventListener.

There is an issue with FireFox, because this method in FireFox requires 2 arguments - type of listener and the listener itself. But in youtube.js there is only type:

scope.removeHtmlMediaElementListener = function(htmlMediaElement) {
    htmlMediaElement.removeEventListener("waiting");
    htmlMediaElement.removeEventListener("ended");
    htmlMediaElement.removeEventListener("playing");
    htmlMediaElement.removeEventListener("timeupdate");
}

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener

Not able to run with example in bower component

I have followed your example, but I am unable to run the youtube video.
Getting this error : TypeError: Cannot read property '0' of undefined

Parse youtube parameters from html

My idea is that the vg-youtube attribute will be passed a set of parameters that will be set on the YT object.

ex

<vg-video vg-src="source.sources" vg-youtube="rel=0;showinfo=1"></vg-video>

var optionsArray = attr.vgYoutube.split(';');
var playerVars = {
  controls: 0,
  showinfo: 0,
  rel: 0
}

optionsArray.forEach(function(item) {
  var keyValuePair = item.split('=');
  playerVars[keyValuePair0]] = keyValuePair[1];
});

ytplayer = new YT.Player(API.mediaElement[0], {
  videoId: getYoutubeId(url), playerVars);
});

Will also have checks to make sure keys and values are valid.

No issues

None

TypeError: undefined is not a function

I got this problem:

Init youtube api youtube.js:11
TypeError: undefined is not a function
at isYoutube (fvideogular/youtube/youtube.js:115:40)
at onSourceChange (videogular/youtube/youtube.js:119:33)
at Object.fn (videogular/youtube/youtube.js:132:33)
at k.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:109:424)
at k.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:398)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:270
at Object.d as invoke
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:178)
at fc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:387)
at Xc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:17:415)

Stagging

I had make staging branch
I had test it on firefox, and chrome, please feedback if you have problem
https://github.com/NamPNQ/bower-videogular-youtube/tree/stagging

Auto play not working

I started with the example youtube.js and html files and the video does not auto play. Here is my code:

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

$scope.onCompleteVideo = function () {
  $scope.isCompleted = true;
};

$scope.onUpdateState = function (state) {
  $scope.state = state;
};

$scope.onUpdateTime = function (currentTime, totalTime) {
  $scope.currentTime = currentTime;
  $scope.totalTime = totalTime;
};

$scope.onUpdateVolume = function (newVol) {
  $scope.volume = newVol;
};

$scope.videos = [
  {
    sources: [
        {src: video.url_source}
    ]
    // Tracks are inside .mpd file and added by Dash.js
  }
];

$scope.config = {
  autoHide: true,
  autoHideTime: 3000,
  autoPlay: true,
  sources: $scope.videos[0].sources,
  tracks: $scope.videos[0].tracks,
  loop: true,
  preload: "auto",
  transclude: true

};

Close ads

Hi,
When i use this plugin and youtube shows an ads popup( in the bottom of the video), i can't close this ads popup(the x button is disabled). There is a way i can enable this button or a function to close the ads?

Thanks

Plugin not working

TypeError: Cannot read property '0' of undefined at Object.fn (youtube.js:121) at Scope.$get.Scope.$digest (angular.js:14129) at Scope.$get.Scope.$apply (angular.js:14391) at done (angular.js:9567) at completeRequest (angular.js:9752) at XMLHttpRequest.requestLoaded (angular.js:9695)

Angular v1.3.4
Videogular v0.7.1

Add videos dynamically

Hi !

Thanks for youtube support!

I tried to load video dynamically

For example:

var url   = $sce.trustAsResourceUrl("https://www.youtube.com/watch?v="+id)
$rootScope.config.sources.push({ src: url, type: "video/youtube"})

//other controller
$rootScope.config = {
            width: 400,
            height: 300,
            autoHide: false,
            autoHideTime: 3000,
            autoPlay: false,
            responsive: false,
            stretch: $scope.stretchModes[1],
            sources: [  ],
            transclude: true,
            theme: {
                url: "styles/themes/default/videogular.css"
            },
            plugins: {
                poster: {
                    url: "assets/images/videogular.png"
                },
            memeAds: {
                vid:'P9EzRfvqOF'
            }
        }
    };

And added to the sources array correctly, but when play, i get this error:

TypeError: Cannot read property 'playVideo' of undefined
    at onEvent (http://dev.jukebox/js/com/2fdevs/videogular/plugins/youtube.js:156:45)
    at Scope.$emit (https://code.angularjs.org/1.2.17/angular.js:12732:33)
    at play (http://dev.jukebox/js/com/2fdevs/videogular/videogular.js:300:14)
    at playPause (http://dev.jukebox/js/com/2fdevs/videogular/videogular.js:276:13)
    at HTMLElement.onClickPlayPause (http://dev.jukebox/js/com/2fdevs/videogular/plugins/controls.js:120:11)
    at HTMLElement.x.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:14113)
    at HTMLElement.v.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:10857) 

I updated videogular and youtube.js along with other units from this repository (stagging)

Conflict between angular-video-bg and videogular-youtube

Hi everybody,

I've spent the last couple hours trying to figure out why videogular-youtube didn't work in my app and I've found out that it was because there is a strange conflict happening with angular-video-bg.

I guess it's because the plugins both use the same method to retrieve the Youtube videos and I would like to know if some people got the same problem and how they resolved it.

console.log

Could we remove console.log from youtube.js? It crashes the plugin with IE

Example not working locally

example does not work on local machine at all. no errors, just blank page

wow

Youtube video: change autoplay using radioButton

Hi,
I see that I can enable Youtube's video autoplay in youtube.js from videogular-youtube pluggin:

playerVars = {
         'controls': 0,
         'showinfo': 0,
         'rel': 0,
         'autoplay': 0, //Switch autoplay to 1 to autoplay videos
         'start': 0
  };

My problem is that I have two radioButtons for enable or disable autoplay. How can I make that, when I select enable autoplay, change the property to autoplay the video?

P.D. Sorry for my English.

Not working with videogular 0.5.x

Hi there,

I tried to use this plugin with the latest version of videogular (~ 0.5.1) and it is not working.

The first problem is that it still uses the VG_EVENTS constant, that does not exists anymore.

Is there any way to fix it for using the new $watch and $observe approach used by videogular newer versions?

Thanks for your effort!

Switching from YouTube video to non-YouTube video fails

When loading the player, onVideoReady() sets the getter/setter functions and the play(), pause(), etc. When changing to a non-YouTube source, these functions are never returned to their original (non-YouTube) state, so pressing play (for example) fails.

the plguin not works! wey

ERROR with there plugin...
the error is ?

Cannot play videos in a playlist with non-youtube videos

Seems the plugin code overrides "mediaelement" functions without reverting back to original functions on video complete. This causes problem when trying to play the next non-youtube video by changing videogular source.

    API.mediaElement[0].__defineGetter__("duration", function () {
        return ytplayer.getDuration();
    });

    API.mediaElement[0].__defineGetter__("currentTime", function () {
        return ytplayer.getCurrentTime();
    });

    API.mediaElement[0].__defineSetter__("currentTime", function (seconds) {
        return ytplayer.seekTo(seconds, true);
    });
...
    API.mediaElement[0].play = function () {
        ytplayer.playVideo();
    };
    API.mediaElement[0].pause = function () {
        ytplayer.pauseVideo();
    };
...

Missing State Change Event when switching video

Hi,
when you change the video source, the new video is loaded with loadVideoById, and it is played automatically.
If the Player was in paused or stopped state, one doesn't get an event then.

onEnter() don't work with youtube plugin on smartphone

Hello,

I'm trying to add event on video using cuePoints, onEnter and onComplete function. But it doesn't work with Youtube plugin when the video is see on a smartphone. When I test without Youtube plugin it work on smartphone.

Here my code :

controller :

    var timePoint = [];
    var start = 3;
    var end = 10;

    var result = {};
    result.timeLapse = {
            start: start,
            end: end
    };

    result.onComplete = function onComplete(currentTime, timeLapse, params) {
        alert('onComplete')
    };

    result.onEnter = function onEnter(currentTime, timeLapse, params) {
        alert('onEnter');
    };

    timePoint.push(result);

    this.config = {
        preload: "none",
        sources: [{
                src: "https://www.youtube.com/watch?v=bZZB40MRjiI"
            }],
        theme: {
            url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
        },
        cuePoints: {
            timePoint: timePoint
        },
        plugins: {
            controls: {
                autoHide: true,
                autoHideTime: 5000
            }
        }
    };

view :

<videogular vg-theme="videoController.config.theme.url"
                   vg-player-ready="videoController.onPlayerReady($API)"
                   vg-auto-play="true"
                   vg-native-fullscreen="false"
                   vg-plays-inline="true"
                   vg-cue-points="videoController.config.cuePoints"
                   vg-complete="videoController.onCompleteVideo()" >
           <vg-media vg-src="videoController.config.sources"
                     vg-native-controls="false"
                     vg-youtube="rel=1;showinfo=0">
           </vg-media>
</videogular>

Any Idea ?

Is vg-complete called?

Hi,

when youtube video is finished playing, is the method in vg-complete called?

<videogular vg-theme="videoConfig.theme.url" class="videogular-container" vg-complete="onCompleteVideoPlay()" vg-player-ready="onPlayerReady($API)">
    <vg-media vg-src="videoConfig.sources" vg-youtube="rel=1;showinfo=1"></vg-media>
</videogular>

$scope.onCompleteVideoPlay = function () {
                if (secondScreenCtrl.API) {
                    secondScreenCtrl.API.toggleFullScreen();
                    $scope.playingVideo = false;
                } else {
                    throw new Error('video player API not ready!');
                }
};

Vimeo support?

Hey!

Thanks for a great plugin!
Any ambition for including Vimeo as well?

Cheers!

TypeError url.match is not a function

It gives this error when I change from regular mp4 to youtube video.

TypeError: url.match is not a function
at isYoutube (youtube.js:142)

Working example

Hi,

is it possible that you include a working example in this repository for reference?

Thanks.

Videogular 1.0

Hi,

I would like to ask that do you support the new version of videogular?(http://www.videogular.com/tutorials/migration-guide-to-videogular-1-0-0/)
I just started to use it, but the youtube plugin doesn't work. Do you have any suggestion about it?

Many thanks

ytplayer.a is undefined

Hi,

I am trying the plugin and getting error here;

                        API.mediaElement[0].__defineGetter__("videoWidth", function () {
                            return ytplayer.a.width; --<<<<  ytplayer.a is undefined
                        });

inspecting ytplayer from developer tools i cannot see the property "a"

Update bower youtube.js to master version

Hello,

Right now the youtube.js of bower-videogular-youtube V2.0.0 is not the newest code of master one. Can you update bower at your earliest convinience?

One problem with V2 is I can't change youtube params with attribute vg-youtube.

Thanks!

videogular-youtube - Cannot read property '0' of undefined - onSourceChange(newVal[0].src);

I have installed videogular-youtube and am faced with the following:

TypeError: Cannot read property '0' of undefined
    at Object.fn (vg-youtube.js:121)
    at Scope.$get.Scope.$digest (angular.js:14308)
    at angular.js:14505
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312

Note I have even used just the example files provided, (with modification include the correct css file for the theme) but still the same.

I have also tried with code from the latest commits and from the pull requests but faced with the same.

I am using the latest stable versions of angular and videogular.

Is videogular-youtube up to date?

Can't get video to play on iOS

Here's my code pen if that helps. Videogular without the Youtube plugin works fine.

vgYoutube is unable to be used in combination with the vgNextVideo Plugin

As vgYoutube uses deprecated defineGetters and defineSetters to overwrite the existing control functions, it is unable to get access the response '.src' of the NewVal in the directive link function.

Is there a way to remove these Getters and Setters during the 'destroyYoutubePlayer()' function?

Greets Jules

Vimeo integration WIP

Ive made some prototype i would like you to take a look at this , currently as a gist , ill be polishing it of course.

https://gist.github.com/rubenCodeforges/bd876bd40343d0f68616

Support for Angular 2

Thanks for the plugin ,

Any support for the angular2

is fullscreen working?

Hi

I've tried calling toggleFullScreen() on videogular but the youtube video didn't switch to fullscreen.

It switches to fullscreen only on doubleclick.

Thanks for help!

When changing source, the next video starts playing automatically

Every time I change the sources property, the video automatically starts playing - is there any way to stop this from happening?

Not load youtube videos...

I don't understand...

My code:

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

.controller('playerController', 
    function($scope, $sce) {
        $scope.currentTime = 0;
        $scope.totalTime = 0;
        $scope.state = null;
        $scope.volume = 1;
        $scope.isCompleted = false;
        $scope.API = null;

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

        $scope.onCompleteVideo = function() {
            $scope.isCompleted = true;
        };

        $scope.onUpdateState = function(state) {
            $scope.state = state;
        };

        $scope.onUpdateTime = function(currentTime, totalTime) {
            $scope.currentTime = currentTime;
            $scope.totalTime = totalTime;
        };

        $scope.onUpdateVolume = function(newVol) {
            $scope.volume = newVol;
        };

        $scope.onUpdateSize = function(width, height) {
            $scope.config.width = width;
            $scope.config.height = height;
        };

        $scope.stretchModes = [
            {label: "None", value: "none"},
            {label: "Fit", value: "fit"},
            {label: "Fill", value: "fill"}
        ];

        $scope.config = {
            width: 300,
            height: 300,
            autoHide: false,
            autoHideTime: 3000,
            autoPlay: false,
            responsive: false,
            stretch: $scope.stretchModes[1],
            sources: [
                {src: $sce.trustAsResourceUrl("http://www.youtube.com/watch?v=dC4Ac4hiLFM"), type: "video/youtube"},
                /*{src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                {src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}*/
            ],
            transclude: true,
            theme: {
                url: "styles/themes/default/videogular.css"
            },
            plugins: {
                poster: {
                    url: "assets/images/videogular.png"
                },
                ads: {
                    companion: "companionAd",
                    companionSize: [728, 90],
                    network: "6062",
                    unitPath: "iab_vast_samples",
                    adTagUrl: "http://pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear"
                }
            }
        };

        $scope.changeSource = function() {
            $scope.config.sources = [
                {src: $sce.trustAsResourceUrl("http://vjs.zencdn.net/v/oceans.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://vjs.zencdn.net/v/oceans.webm"), type: "video/webm"}
            ];
        };
})

and view:

 <videogular
            vg-player-ready="onPlayerReady" 
            vg-complete="onCompleteVideo" 
            vg-update-time="onUpdateTime" 
            vg-update-size="onUpdateSize" 
            vg-update-volume="onUpdateVolume" 
            vg-update-state="onUpdateState"
            vg-width="config.width" vg-height="config.height" 
            vg-theme="config.theme.url" 
            vg-autoplay="config.autoPlay" 
            vg-stretch="config.stretch.value" 
            vg-responsive="true">

            <video id='player' class='videoPlayer' vg-src="config.sources" preload='metadata'></video>

....

But not error show, and not load video youtube...

I try with http and https.

Help ?

How to display subtitle?

Hi, could you tell me how to display my own subtitle on youtube video. I tried this:

In html file I added: "...vg-tracks="config.tracks"...", and in js file I added:
tracks: [
{
src: $scope.story.subtitleUrl,
kind: "subtitles",
srclang: "en",
label: "English",
default: "default"
}
]
But the subtitle is not shown. Thanks.

Clicking VIdeo to Play/Pause doesn't trigger an event

Hi,
playing or pausing the video by simply clicking on it doesn't trigger a state change event.

my Videogular HTML looks like this:

<videogular vg-player-ready="controller.onPlayerReady($API)"  vg-update-time="controller.onUpdateTime($currentTime, $duration)" vg-update-state="controller.onUpdateState($state)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme">
  <vg-media vg-youtube="rel=1;showinfo=1" vg-src="controller.config.sources"></vg-media>
</videogular>

and the controller's onComplete function is just:

controller.onCompleteVideo = function() {
  console.log("onCompleteVideo");
};

if i play non-youtube video after youtube video then it gives me error TypeError: Cannot read property 'src' of null

Digest cycle constantly triggered

I was gonna implement a directive to watch the scroll position and decided to test if this directive would have negative effects on the performances.

At my surprise, I found out that videogular is constantly watching and triggering the digest cycle.

Here is a Codepen to show you the problem: http://codepen.io/PierrickGT/pen/qbJawX

Is there a workaround?

I'cant load dynamic video on src

this.config = {
preload: "none",
sources: [
{src: "https://www.youtube.com/watch?v="+ $scope.data.trailer_video},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
}
}
};

unintentional dependency on jQuery?

I was trying to use videogular-youtube but it looks up an element via 'vg-overlay-play>div'

https://github.com/NamPNQ/bower-videogular-youtube/blob/master/youtube.js#L54

                        var videogularElementScope = API.elementScope.scope().$$childHead,
                            vgOverPlayElementScope = angular.element('vg-overlay-play>div', API.videogularElement).scope();

That fails for me at runtime because angular's jqLite appears to not support selector syntax and throws "Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!"

Since it doesn't appear to list jQuery as a dependency in bower.json, I was wondering if this was unintentional and this could be updated to work with 'just' angular and its jqLite?

Thanks!

New release needed

I think that is neccesary make a new tagged release (2.0.1?) to add the last changes to bower package.

Thank you

Uncaught TypeError: undefined is not a function

Hi, and thank you for your work!

Videogular is working good with a mp4 video, but i can't use your plugin because i have this error on initialization:

Uncaught TypeError: undefined is not a function
    play
    $scope.doPlayerReady
    videogularElementScope.onPlayerReady
    $scope.onVideoReady
    scope.onVideoReady

This error comes from videogular.js in the play function (controller part), this.videoElement[0].play(); is undefined.

HTML

<videogular ng-switch-when="youtube" vg-autohide="config.autoHide" vg-autohide-time="config.autoHideTime" vg-complete="onCompleteVideo" vg-update-time="onUpdateTime" vg-autoplay="config.autoPlay" vg-stretch="config.stretch" vg-width="config.width" vg-height="config.height" vg-theme="config.theme" vg-responsive="config.responsive">
    <video class='videoPlayer' preload='metadata'>
            <!--<source ng-src='http://video-js.zencoder.com/oceans-clip.mp4' type='video/mp4'>-->
        <source src='http://www.youtube.com/watch?v=nOEw9iiopwI' type='video/youtube' />
    </video>
    <vg-youtube></vg-youtube>
    <vg-overlay-play vg-play-icon="config.theme.playIcon"></vg-overlay-play>
    <vg-controls vg-autohide="config.autoHide" vg-autohide-time="config.autoHideTime" style="height: 50px;">
        <vg-play-pause-button vg-play-icon="config.theme.playIcon" vg-pause-icon="config.theme.pauseIcon"></vg-play-pause-button>
        <vg-timeDisplay>{{ currentTime }}</vg-timeDisplay>
        <vg-scrubBar>
            <vg-scrubbarcurrenttime></vg-scrubbarcurrenttime>
        </vg-scrubBar>
        <vg-timeDisplay>{{ totalTime }}</vg-timeDisplay>
        <vg-volume>
            <vg-mutebutton
                vg-volume-level-3-icon="config.theme.volumeLevel3Icon"
                vg-volume-level-2-icon="config.theme.volumeLevel2Icon"
                vg-volume-level-1-icon="config.theme.volumeLevel1Icon"
                vg-volume-level-0-icon="config.theme.volumeLevel0Icon"
                vg-mute-icon="config.theme.muteIcon">
            </vg-mutebutton>
            <vg-volumebar></vg-volumebar>
        </vg-volume>
        <vg-fullscreenButton vg-enter-full-screen-icon="config.theme.enterFullScreenIcon" vg-exit-full-screen-icon="config.theme.exitFullScreenIcon"></vg-fullscreenButton>
    </vg-controls>
</videogular>

Module:

['ngSanitize', 'com.2fdevs.videogular', 'com.2fdevs.videogular.plugins.controls', 'com.2fdevs.videogular.plugins.overlayplay', 'com.2fdevs.videogular.plugins.buffering', 'com.2fdevs.videogular.plugins.poster', 'info.vietnamcode.nampnq.videogular.plugins.youtube']

videogular 0.3.0
videogular-youtube 1.0.0

What do you think?