AngularJs videoplaylist 指令未触发事件答案

【问题标题】：AngularJs videoplaylist directive onended event not firedAngularJs videoplaylist 指令未触发事件
【发布时间】：2013-08-25 06:18:21
【问题描述】：

我正在尝试实现一个视频播放列表，它可以自动播放并循环播放给定视频的数组。

到目前为止，我无法让 HTML5 视频触发 onended 事件，我不知道为什么

app.directive("videoqueue", function () {
return {
    restrict: 'E',
    replace: true,
    template: function (scope, element, attrs) {

        console.log("asdasd")


        if (currentData === undefined
            || currentData.media === undefined) {
            return "";
        }

        var video = currentData.media.videos[0];

        console.log(video)


        var html = '<video id="video" height="1024" width="1280"  controls autoplay>'
            + ' <source src='
            + '"' + 'data/videos/' + video.filename + '"'
            + ' type="video/webm"' +
            ' onended="alert(\'test\')"' +
            '></video>';

        return html;

    }
}})

HTML：

<videoqueue></videoqueue>

结果：

<video id="video" height="1024" width="1280" controls="" autoplay=""> <source src="data/videos/sample1" type="video/webm" onended="alert('test')"></video>

视频开始播放，但结束后不显示任何提示。我错过了什么？

【问题讨论】：

标签： events angularjs video

【解决方案1】：

onended 事件需要在 <video> 元素而不是 <source> 上。

var html = '<video id="video" height="1024" width="1280"  controls autoplay onended="alert(\'test\')">'
            + ' <source src='
            + '"' + 'data/videos/' + video.filename + '"'
            + ' type="video/webm"' +
            '></video>';

jsFiddle

【讨论】：