1

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

到目前为止，我无法让 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>

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

4

1 回答 1

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

于 2013-08-22T14:40:50.150 回答