Tôi cũng sử dụng videojs
bower install videojs --save
Tôi muốn sử dụng chỉ thị của tôi trong một ng-repeat và với một đối tượng phạm vi, vì vậy ... đây là phiên bản của tôi về nó với đạo cụ để Eduard trên. Dường như tôi không gặp sự cố với việc xử lý trình phát video, nhưng source tag issue referenced là một vấn đề thực tế.
Tôi cũng đã quyết định viết câu trả lời này làm câu trả lời để tôi có thể đưa ra ví dụ về cách người ta có thể muốn xử lý sự kiện videoj.
QUAN TRỌNG! Xin lưu ý tôi đang sử dụng Angular.js với các mẫu Jinja2, vì vậy tôi phải thay đổi các điểm đánh dấu nội suy HTML Angular của mình thành {[ ]} từ {{ }} trong trường hợp bất kỳ ai nhận thấy điều đó là lạ. Tôi sẽ bao gồm mã đó, vì vậy nó không phải là lạ cho bất cứ ai.
Interpolation tinh chỉnh
app.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('{[');
$interpolateProvider.endSymbol(']}');
}]);
Chỉ sử dụng
angular.module('myModule').directive('uiVideo', function() {
// Function for logging videojs events, possibly to server
function playLog(player, videoId, action, logToDb) {
action = action || 'view';
var time = player.currentTime().toFixed(3);
if (logToDb) {
// Implement your own server logging here
}
// Paused
if (player.paused()) {
console.log('playLog: ', action + " at " + time + " " + videoId);
// Playing
} else {
console.log('playLog: ', action + ", while playing at " + time + " " + videoId);
if (action === 'play') {
var wrapFn = function() {
playLog(player, videoId, action, logToDb);
};
setTimeout(wrapFn, 1000);
}
}
}
return {
template: [
'<div class="video">',
'<video id="video-{[ video.id ]}" class="video-js vjs-default-skin img-responsive" controls preload="none"',
' ng-src="{[ video.mp4 ]}"',
' poster="{[ video.jpg ]}"',
' width="240" height="120">',
'</video>',
'</div>'
].join(''),
scope: {
video: '=video',
logToDb: '=logToDb'
},
link: function (scope, element, attrs) {
scope.logToDb = scope.logToDb || false;
var videoEl = element[0].children[0].children[0];
var vp = videojs(videoEl, {},
function(){
this.on("firstplay", function(){
playLog(vp, scope.video.id, 'firstplay', scope.logToDb);
});
this.on("play", function(){
playLog(vp, scope.video.id, 'play', scope.logToDb);
});
this.on("pause", function(){
playLog(vp, scope.video.id, 'pause', scope.logToDb);
});
this.on("seeking", function(){
playLog(vp, scope.video.id, 'seeking', scope.logToDb);
});
this.on("seeked", function(){
playLog(vp, scope.video.id, 'seeked', scope.logToDb);
});
this.on("ended", function(){
playLog(vp, scope.video.id, 'ended', scope.logToDb);
});
}
);
}
};
});
Chỉ HTML
<div ng-repeat="row in videos">
<ui-video video="row"></ui-video>
</div>
Câu hỏi đặt ra là rõ ràng và tôi xin bày tỏ bản thân mình sai? –
Dường như đây là một câu hỏi hợp lý. Trước đó, không có mã hoặc định dạng nó trông giống như một downvote. Ai đó có thể giúp đỡ, tôi cũng không có kinh nghiệm với Angular. – elclanrs
Tất nhiên. Được rồi cảm ơn. Trong AngularJS, tôi không thực sự hiểu triết lý về quản lý DOM (nhưng ... khó quên thói quen jQuery!) –