angularjs - ui-router 状态更改后销毁 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({'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';
})
推荐阅读
- android - firebase 远程配置 api 密钥是公开的还是秘密的?使用该 api 密钥可以做什么?
- python - 如何在不安装的情况下在 Mac 和 Windows 上运行 .py 3 文件
- amazon-rds - 我应该为符合 HIPAA 和 PCI-DSS 的数据使用单独的数据库吗?
- wso2 - 如何从修复传输 wso2 的响应中获取值
- sql - 第三高使用的编程语言 PostgreSQL
- angular - 如何以角度在一个垫表数据源中显示 2 个数组列表?
- android - 当 shouldsimulate 为 false 时,mapbox android 导航崩溃
- jenkins - 来自并行作业的 Jenkins 工件
- mysql - 如何在 Node.js 的 UPDATE 中正确使用 WHERE?
- java - if-else 和 if 仅当方法具有 return 语句时-它们是否相同?