Angularjs HTML5 Видео onended

Question

Я загружаю видео html5 mp4, и я хочу вызвать функцию из угловой области при окончании видео. Я пробовал под простым кодом, но перенесенное событие не может найти функцию в угловом пространстве. Любое предложение пожалуйста.

HTML

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir onended="vidEnded()"> 

Angularjs добавлена ​​функция в главном контроллере. onended событие срабатывает, но функция не определена

$scope.vidEnded = function(){ 
     console.log('vid ended') 
    } 

также попытался добавить функцию в каталоге, как это, но функция не срабатывает.

.directive('vidDir', [function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elem, attr) { 
      console.log(elem) 
      elem.onended = function(){ 
       console.log('vid ended') 
      } 
     } 
    }; 
}]); 

Благодаря

Answer 1

Вы на самом деле не нужна директива или плагин для запуска onended события. (Если JQuery встроен) Вот какая-то логика, чтобы добавить в вашем контроллере. Убедитесь, что у тега видео есть Id.remove атрибут on end, если у вас уже есть его. Затем в контроллере добавить этот

var jq = $; 
 

 
jq('#IdOfVideo').on('ended', function(){ 
 
//Whatever you want to happen after it has ended 
 
});

Answer 2

use this.vidEnded(); 
    .directive('vidDir', [function() { 
     return { 
      restrict: 'A', 
      link: function (scope, elem, attr) { 
       console.log(elem) 
       this.vidEnded= function(){ 
        console.log('vid ended') 
       } 
      } 
     }; 
    }]); 

Answer 3

Добавьте следующее в передней части угловой функции:

angular.element(this).scope().vidEnded() 

Результат:

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir onended="angular.element(this).scope().vidEnded()"> 

Answer 4

Некоторое время работал над этой проблемой и нашел взломать ту же проблему, которая сработала для меня. Использует функцию jQuery $ timeOut (вы также можете использовать тайм-аут ванили JS, как типичный взлом с угловым мною), так и видео-события html5: «продолжительность», «текущее время» и «время ожидания», которые вы можете узнать больше около here. Используя эти значения событий, вы можете вычислить конец видео и смоделировать видеоролик html5 «закончился». Вот код

myCtrl.myVideo = document.getElementbyId("my-video-id"); //you need to have an id for your html5 video 

//function to define in the controller 

myCtrl.videoListener = function() 
{ 

//javascript event listener function 

myCtrl.myVideo.addEventListener('timeupdate', 
function() 
{ 

    myCtrl.myVideo = this; //define "this" 

    var videoDuration = this.duration; 
    var videoCurrentTime = this.currentTime; 


    if (videoCurrentTime >= videoDuration) 
    { 

     //wrapping in a $timeOut function is the only way this works! 

     $timeout(function(){ 
      //do something when the video ends, set variables, etc. 
     }, 0); 
    } 
    else if (videoCurrentTime < videoDuration) 
    { 

     //wrapping in a $timeOut function is the only way this works. 

     $timeout(function(){ 
      //do something while the video is playing, set variables, etc. 
     }, 0); 
    } 

    }); 

}