Not load youtube videos...

Question

Not load youtube videos...

brunocascio opened this issue 10 years ago · comments

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 ?

Nam PHAM · Answer 1 · Mon Apr 28 2014 02:03:20 GMT+0800 (China Standard Time)

Temporary you can use videogular in tree: https://github.com/2fdevs/videogular/tree/c30e3c5f9645b8ed4de4ea597b4a6e56a72cf8ac

I will update my code soon

Nam PHAM · Answer 2 · Fri Jun 13 2014 05:06:26 GMT+0800 (China Standard Time)

Duplicate of #9

Ruben M · Answer 3 · Wed Oct 14 2015 21:56:16 GMT+0800 (China Standard Time)

having same issue now

Nam PHAM · Answer 4 · Wed Oct 14 2015 22:02:40 GMT+0800 (China Standard Time)

@rubenCodeforges What problem you face?

Ruben M · Answer 5 · Wed Oct 14 2015 22:33:07 GMT+0800 (China Standard Time)

@NamPNQ figured out that the ytplayer obj ,after the directive is fully intitialized , looks like this http://i.imgur.com/Cl0SutW.png
As you can see no method for playing video etc.
This happens because the destroyYoutubePlayer is called several times.
By the way to exclude any issues that could be happen due to my code ive hardcoded this part

ytplayer = new YT.Player('yTest', {
                                            videoId: 'I7ZUkd44-Co',
                                            height: '390',
                                            width: '640'
                                        });

Also i am using jade as template engine.

Ruben M · Answer 6 · Wed Oct 14 2015 22:34:20 GMT+0800 (China Standard Time)

And yeh if i comment out

                        function destroyYoutubePlayer() {
                            //ytplayer.destroy();
                        }

The player object will have all its methods http://i.imgur.com/mU5kyg2.png

Ruben M · Answer 7 · Wed Oct 14 2015 22:49:58 GMT+0800 (China Standard Time)

BTW im usin yeoman angular-gulp-generator
https://github.com/Swiip/generator-gulp-angular

Nam PHAM · Answer 8 · Thu Oct 15 2015 00:11:12 GMT+0800 (China Standard Time)

Please paste your code in jsbin

Ruben M · Answer 9 · Thu Oct 15 2015 00:15:25 GMT+0800 (China Standard Time)

its hard , as it is a big project , i can make just this snippets

videogular(vg-theme="config.theme.url" , vg-player-ready='onPlayerReady($API)')
            vg-media(ng-if="video.embed", vg-src="[{src:videos[0].url}]", vg-youtube="rel=1;showinfo=0")
            vg-controls(vg-autohide="config.plugins.controls.autoHide", vg-autohide-time="config.plugins.controls.autoHideTime")
              vg-play-pause-button
              vg-time-display {{ currentTime | date:'mm:ss':'+0000' }}
              vg-scrub-bar
                vg-scrub-bar-current-time
              vg-time-display {{ timeLeft | date:'mm:ss':'+0000' }}
              vg-volume
                vg-mute-button
                vg-volume-bar
              vg-fullscreen-button
            vg-next-video(ng-if='nextVideos' vg-src='nextVideos' vg-time='5000')

Configs

(function() {
  'use strict';

  angular
    .module('show.app')
    .constant('video_config', {
      theme: {
        url: 'http://www.videogular.com/styles/themes/default/latest/videogular.css'
      },
      plugins: {
        controls: {
          autoHide: true,
          autoHideTime: 5000
        },
        ads: {
          companion: "companionAd",
          container: "contentElement",
          companionSize: [728, 90],
          network: "6062",
          unitPath: "iab_vast_samples",
          adTagUrl: "http://ad3.liverail.com/?LR_PUBLISHER_ID=1331&LR_CAMPAIGN_ID=229&LR_SCHEMA=vast2",
          skipButton: "<div class='skipButton'>skip ad</div>"
        },
        analytics: {
          category: "Videogular",
          label: "Main",
          events: {
            ready: true,
            play: true,
            pause: true,
            stop: true,
            complete: true,
            progress: 10
          }
        }
      }
    });

})();

directives controller :

  function videoBoxController($scope, $sce, Video, video_config) {
    $scope.config = video_config;

Two Fucking Developers · Answer 10 · Thu Oct 15 2015 18:27:15 GMT+0800 (China Standard Time)

Could be an interaction problem with ads.

Can you try disabling ads?

Ruben M · Answer 11 · Thu Oct 15 2015 19:11:27 GMT+0800 (China Standard Time)

@2fdevs sorry its a bit later version , i tried before ads where added

Ruben M · Answer 12 · Thu Oct 15 2015 19:12:13 GMT+0800 (China Standard Time)

BTW Currently working with outcommented destroy , works well and with ads and with youtube wrapper

Two Fucking Developers · Answer 13 · Thu Oct 15 2015 19:17:40 GMT+0800 (China Standard Time)

If it's working I undestand that you don't need help then?

Anyway, I'm curious why it doesn't works for you with the destroy.

Please, open a new issue if you need further help, ok? :)

Ruben M · Answer 14 · Thu Oct 15 2015 19:30:31 GMT+0800 (China Standard Time)

@2fdevs yes without destroy its workin , its not good, but i dont have much time to contribute , sorry for that i would open a pr but cant investigate the problem deeper because of time lack.

Two Fucking Developers · Answer 15 · Thu Oct 15 2015 19:32:24 GMT+0800 (China Standard Time)

@rubenCodeforges np, I will try to investigate by my own :)

Ruben M · Answer 16 · Thu Oct 15 2015 19:53:28 GMT+0800 (China Standard Time)

@2fdevs ill be wathcing updates thanks , also perhaps ill be pushing a vimeo integration to his module .

Two Fucking Developers · Answer 17 · Thu Oct 15 2015 20:41:19 GMT+0800 (China Standard Time)

@rubenCodeforges that would be awesome!! 💃

Ruben M · Answer 18 · Thu Oct 15 2015 20:47:53 GMT+0800 (China Standard Time)

Already working on it ;)