Angularjs 在ui路由器状态更改后销毁hls.js流
在我的应用程序中,我使用视频流。我从API调用这个流,并在angularjs应用程序中使用视频标签显示流Angularjs 在ui路由器状态更改后销毁hls.js流,angularjs,angular-ui-router,video-streaming,rtsp,hls.js,Angularjs,Angular Ui Router,Video Streaming,Rtsp,Hls.js,在我的应用程序中,我使用视频流。我从API调用这个流,并在angularjs应用程序中使用视频标签显示流 <video id="video" class="iframePreview" controls="true" autoplay type="application/x-mpegURL"> </video> <button class="button_pv btn btn-default" ui-sref="camera({'str
<video id="video" class="iframePreview" controls="true" autoplay
type="application/x-mpegURL">
</video>
<button class="button_pv btn btn-default"
ui-sref="camera({'streamID': monitorsIds[0] })">
Recorded Events
</button>
一切正常,但当我在网络控制台中更改状态时,仍然可以看到正在加载流数据
如何摧毁这个?
Thnx这里是一个通用指令:
app.directive("hlsSource", function() {
return {
link: postLink,
};
function postLink(scope, elem, attrs) {
var hls;
var video = elem[0];
scope.$watch(attrs.hlsSource, function(value) {
if (!value) return;
//else
hls && hls.destroy();
hls = new Hls();
hls.loadSource(value);
hls.attachMedia(video);
scope.$eval(attrs.onAttach({$hls: hls, $video: video});
});
scope.$onDestroy(function() {
hls && hls.destroy();
});
}
});
用法:
<video id="video" class="iframePreview" controls="true" autoplay
type="application/x-mpegURL"
hls-source="$ctrl.source" on-attach="$ctrl.onAttach($hls,$video)">
</video>
使用参见AngularJS常见问题解答-对于AngularJS,使用
document.getElementById
是一个更深层次问题的症状。代码应该附加到带有@georgeawg thnx的元素,这是我唯一使用此方法的地方。。。但是,如果您知道如何为此编写指令,请告诉我。问题中的代码非常不连贯。XHR将数据推送到$rootScope,并使用全局窗口中的数据(monitorsIdsStreamWin
)。它使用ui路由器更改视图。这件事太复杂了,我写不出充分的答案。
<video id="video" class="iframePreview" controls="true" autoplay
type="application/x-mpegURL"
hls-source="$ctrl.source" on-attach="$ctrl.onAttach($hls,$video)">
</video>
app.controller("videoController", function() {
var current_hls;
var current_video;
this.onAttach = function(hls, video) {
current_hls = hls;
current_video = video;
hls.on(Hls.Events.MANIFEST_PARSED,function() {
current_video.play();
});
};
this.$onDestroy = function() {
current_hls && current_hls.destroy();
};
this.source = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
})