在 ui-路由器状态更改后销毁 hls.js 流
destroy hls.js stream after ui-router state change
在我的应用程序中,我使用视频流。我从我的 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({'streamID': monitorsIds[0] })">
Recorded Events
</button>
然后在 ctrl 中,我从 API 中取出 URL 并传递给 <video></video
return $http
.get(serviceBase + "aaaaaa" + Id)
.then(function(response) {
$rootScope.monitorsIds = [];
angular.forEach(response.data, function(key, value) {
$rootScope.monitorsIds.push(key.monitor);
});
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource(window.monitorsIdsStreamWin[0]);
hls.attachMedia(video);
}
});
一切正常,但是当我在网络控制台中更改状态时,我仍然看到正在加载流数据...
如何销毁它?
谢谢
这是一个通用指令:
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>
JS
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';
})
在我的应用程序中,我使用视频流。我从我的 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({'streamID': monitorsIds[0] })">
Recorded Events
</button>
然后在 ctrl 中,我从 API 中取出 URL 并传递给 <video></video
return $http
.get(serviceBase + "aaaaaa" + Id)
.then(function(response) {
$rootScope.monitorsIds = [];
angular.forEach(response.data, function(key, value) {
$rootScope.monitorsIds.push(key.monitor);
});
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource(window.monitorsIdsStreamWin[0]);
hls.attachMedia(video);
}
});
一切正常,但是当我在网络控制台中更改状态时,我仍然看到正在加载流数据...
如何销毁它? 谢谢
这是一个通用指令:
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>
JS
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';
})