bugfix> angularjs > 投稿

私のアプリでは、ビデオストリームを使用しています。このストリームを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);
    }
    });

すべて順調に動作していますが、ネットワークコンソールで状態を変更しても、ストリームデータの読み込みがまだ表示されています...

これを破壊する方法は? Thnx

回答 1 件
  • 汎用ディレクティブは次のとおりです。

    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';
    })
    
    

あなたの答え