我有一个包含一些文字和视频标签的指令
app.directive('ngAzuremediaplayer', function () {
return {
restrict: 'AE',
priority: 10,
link: function (scope, elem, attrs) {
scope.hideapprove = attrs.hideapprove;
scope.hidereject = attrs.hidereject;
scope.hideinfo = attrs.hideinfo;
scope.hidedelete = attrs.hidedelete;
scope.hidecard = attrs.hidecard;
scope.hidethumb = attrs.hidethumb;
scope.$watch(attrs.ngBind, function (newvalue) {
var myOptions = {
"nativeControlsForTouch": false,
"logo": { "enabled": false },
controls: true,
autoplay: false,
poster: scope.video.ThumbnailUri,
}
var myPlayer = null;
if (scope.video.AMSUri != null) {
myPlayer = amp(document.getElementById(scope.video.RowKey), myOptions);
myPlayer.src([
{
"src": scope.video.AMSUri,
"type": "application/vnd.ms-sstr+xml"
}
]);
}
else {
if (scope.video.RawVideoUri != null) {
myPlayer = amp(document.getElementById(scope.video.RowKey), myOptions);
myPlayer.src([
{
"src": scope.video.RawVideoUri,
"type": "video/mp4"
}
]);
}
}
});
},
templateUrl: '/app/templates/VideoControl.html',
}
});
以下是使用过的模板文件
<div class="monster-admin-video monster-section-link">
<div class="monster-card">
<div class="monster-card-content" ng-hide="hidecard">
<h5 class="monster-card-title" style="margin-top: 0px;">{{video.ChannelName}}</h5>
</div>
<div class="monster-admin-video-player embed-responsive embed-responsive-16by9" id="">
<video id="{{video.RowKey }}" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls>
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
</div>
<div class="monster-admin-action-buttons">
<a class="btn btn-success btn-sm" ng-hide="hideapprove" ng-click="vm.approve(video)"><i class="fa fa-check-circle-o fa-lg"></i></a>
<!--<a class="btn btn-warning btn-sm" ng-hide="hidereject" ng-click="vm.reject(video)"><i class="fa fa-times-circle fa-lg"></i></a>-->
<a class="btn btn-info btn-sm" ng-hide="hideinfo" ng-click="vm.info(video)"><i class="fa fa-info-circle fa-lg"></i></a>
<a class="btn btn-danger btn-sm" ng-hide="hidedelete" ng-click="vm.delete(video)"><i class="fa fa-trash fa-lg"></i></a>
<a class="btn btn-default btn-sm" ng-hide="hidethumb" ng-click="vm.createThumbnail(video)"><i class="fa fa-camera fa-lg"></i></a>
</div>
<div class="monster-admin-video-caption">
<div style="float:left">
{{video.EncodingStatus}}
</div> <div style="float:right">
{{video.VideoProgress}}
</div>
<br />
<p class="lead monster-admin-video-title" ng-bind="video.Title" data-ellipsis></p>
<p class="monster-admin-video-desc" ng-bind="video.Description" data-ellipsis></p>
</div>
</div>
这是按预期工作的，但现在我希望能够在某个时间间隔内更新EncodingStatus和VideoProgress。我有这个常规的javascript函数来做这个
function populateVideoStatus(data) {
angular.forEach(data, function (video, key) {
if (document.getElementById(video.RowKey) != null) {
var encodingStatus = "";
var videoProgress = ""
switch (video.VideoStatusId) {
case 0:
video.EncodingStatus = "Video Not Uploaded";
break;
case 1:
video.EncodingStatus = "Video Uploading";
break;
case 2:
video.EncodingStatus = "Video Upload Complete";
break;
case 3:
video.EncodingStatus = "Video Encoding Started";
break;
case 4:
video.EncodingStatus = "Video Encoding Scheduled";
break;
case 5:
video.EncodingStatus = "Video Encoding Processing";
break;
case 6:
video.EncodingStatus = "Video Encoding Complete";
break;
case 7:
video.EncodingStatus = "Thumbnail Generation Scheduled";
break;
case 8:
video.EncodingStatus = "Thumbnail Generation Processing";
break;
case 9:
video.EncodingStatus = "Thumbnail Generation Complete";
break;
case 10:
video.EncodingStatus = "Video Ready for Viewing";
break;
default:
video.EncodingStatus = "";
break;
}
if (video.VideoProgress == "100%") {
video.VideoProgress = "";
}
var videoPlayer = document.getElementById(video.RowKey);
var temp = videoPlayer.parentElement.parentElement.children[3];
temp.children[0].innerHTML = video.EncodingStatus;
temp.children[1].innerHTML = video.VideoProgress;
}
}, log);
return data;
}
我称之为
function getVideoForReview(call) {
return datacontext.getVideosPage(1, vm.pageSize, vm.CurrentPage, call, '').then(function (data) {
vm.Users = common.getVideoUsers(data);
return vm.videos = common.populateVideoStatus(data);
});
}
这是名为
的区间函数 function doTimeout() {
getVideoForReview(true).then(function (data) {
setTimeout(doTimeout, 5000);
});
}
这里我要做的就是更新包含这两个值的div的DOM。会发生什么，每当我的间隔调用populateVideoStatus（），它刷新指令，我的视频播放器重新初始化，这是显而易见的原因。我知道这是预期的行为，因为我有我的观察，但我无法让它工作。这是我想要做的事情。
这可能吗？
答案 0 :(得分：0)
您确定使用temp定位了正确的元素吗？
对我而言，您似乎将temp设置为monster-admin-video-player div而不是monster-admin-video-caption div。
也许试试：
var temp = videoPlayer.parentElement.parentElement.children[3];
此外，populateVideoStatus函数是否可以设置模板中已有的$scope.video.EncodingStatus和$scope.video.VideoProgress，而不是直接使用DOM innerHTML？