Ng-Src更改視頻無法正常工作

我在嘗試將源設置爲AngularJS中的視頻時出現問題。Ng-Src更改視頻無法正常工作

下面是該視圖的HTML代碼：

<div class="row"> 
    <div class="col-lg-10 col-lg-offset-1"> 
    <video width="100%" controls> 
     <source ng-src="{{levelContent.levelVideo}}" type="video/mp4"> 
     <!--<source ng-src="Content\img\cortes.mp4" type="video/mp4">--> 
     Your browser does not support HTML5 video. 
    </video> 
    </div> 
</div>

下面是該視圖的控制器代碼：

(function() { 
    'use strict'; 

    angular 
    .module('iziCooker') 
    .controller('LevelController', LevelController); 

    LevelController.$inject = ['$scope', 'LevelContentService', '$routeParams', 'LevelService', '$sce' ,'$location']; 
    function LevelController($scope, LevelContentService, $routeParams, LevelService, $sce ,$location) { 
     $scope.levelId = -1; 
     $scope.levelContent = []; 

     function GetLevelContent() { 
      LevelContentService.SetLevelId($routeParams.levelId); 
      $scope.levelId = LevelContentService.GetLevelId(); 
      LevelService.GetLevelContent($scope.levelId).then(function (data) { 
       $scope.levelContent = data; 
       LevelContentService.SetLevelName = data.name + " - " + data.description; 
       $scope.levelContent.levelVideo = $sce.trustAsResourceUrl(data.levelVideo); 
      }); 
     } 

     GetLevelContent(); 
     console.log("Level Controller Loaded!"); 
    } 

})();

我測試我的IE瀏覽器和Chrome應用程序，與第一一個它正常工作，但沒有與我主要使用的第二個。

在IE：

在Chrome：

我單獨測試Chrome上的視頻，它工作正常。我也嘗試過硬編碼的src，就像你上面看到的那樣，它也可以工作。我認爲這可能是$ sce的東西，但似乎沒有。

來源

2016-02-08 jmrivas

你嘗試過直接在視頻元素上設置源取代你<video>標籤？我隱約記得有一個這樣的問題和ng-src不能在''元素上工作。 – Ronnie

https://github.com/angular/angular.js/issues/1352 – Ronnie

我試着直接設置源代碼，它的工作方式就像一個魅力。這很奇怪，角度和HTML5的行爲。非常感謝你！ – jmrivas

我希望問題得到解決，但以防萬一，如果有人需要它。有一種變通方法 - HTML5 video element request stay pending forever (on chrome)

一旦指定的URL調用下面的方法：

function loadVideos() { 
    $("video").each(function() { 
     $(this).get(0).load(); 
     $(this).get(0).addEventListener("canplaythrough", function() { 
      this.play(); 
      this.pause(); 
     }); 
    }); 
}

此作品在Chrome和IE瀏覽器。

來源

2016-07-13 08:36:20

如果在src更改後視頻元素上調用，視頻將更新。這裏有一個片段，將與角1分;組分T

class VideoController { 
    constructor(
     $element 
    ) { 
     this.$inject = [ 
      "$element" 
     ]; 
     this.$element = $element; 
     this.supportedVideoTypes = ["mp4", "webm"]; 
    } 

    $onChanges($event) { 
     this.supportedVideoTypes.forEach((type) => { 
      if ($event[type] && $event[type].currentValue) { 
       let source = this.$element[0].querySelector(`[type="video/${type}"]`); 
       if (source) { 
        source.setAttribute("src", $event[type].currentValue); 
        this.$element[0].load(); 
       } 
      } 
     }); 
    } 
} 

angular.module("myApp") 
    .component("video", { 
     bindings: { 
      mp4: "<", 
      webm: "<" 
     }, 
     controller: VideoController, 
     template: ` 
      <source type="video/mp4"/> 
      <source type="video/webm"/>` 
    });

來源

2017-06-29 04:33:48 stwilz

Ng-Src更改視頻無法正常工作

回答

相關問題