Question

我正在尝试实施一个视频播放列表，该视频播放列表会自动播放并循环播放一系列给定的视频。

到目前为止，我无法获取HTML5视频来触发所发生的事件，我无法弄明白为什么

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>

视频播放但结束后未显示任何警告。我错过了什么？

Answer 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

AngularJs视频播放列表指令触发事件未被解雇

1 个答案: