Javascript 在angular web app中集成video.js

在尝试将video.js集成到angular应用程序时，我遇到了一个奇怪的错误

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
       width="300" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
    <source src="http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4" type='video/mp4' />
</video>

---

有人能解释我为什么会出现这个错误吗？

Src不能使用角度语法使用ng Src代替

下面是我在应用程序控制器中所做的操作：

模板中

非常感谢@Dipak。但我还是犯了同样的错误。但是，当视频托管在同一台服务器上时，一切正常。只有当我试图从url显示视频时，我才遇到错误。您能创建一个plunkr以便我能给您提供解决方案吗？可能存在文件名问题，请尝试重命名并查看它。请参阅：服务将很有用，还有一件事，而不是使用angular.element（）。准备就绪，您可以通过指令使用它。Hi-Dipak。非常感谢$sce.trustAsResourceUrl（价值）服务为他工作。请在答案中加上它。我会接受的。

<video id="example_video_2" class="video-js vjs-default-skin" controls preload="none"
       width="300" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
    <source src="{{video_link}}" type='video/mp4' />
</video>

app.controller('IndexCtrl', function ( $scope, $location, $http,$sce,$routeParams) {
angular.element(document).ready(function () {
        //$scope.getVideos();
        $scope.video_link = "http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4";
    });

})

$scope.generateSrc = function (file, mediaType) {
    if (!!file) {
      return '/media/conversation/' + mediaType + '/' + file;
    }
};

<video poster="{{generateSrc(mediaPoster, 'photo')}}" width="100%" height="100%" class="hzVideoPlayer" id="v_{{vId}}" preload="auto" loop>
    <!--MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7-->
    <source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/mp4" data-quality="high">
    <source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/mp4" data-quality="low">
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome-->
    <source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/webm" data-quality="high">
    <source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/webm" data-quality="low">
    <!-- Flash fallback for non-HTML5 browsers without JavaScript-->
    <object width="320" height="240" type="application/x-shockwave-flash" data="/media/flashmediaelement.swf">
        <param name="movie" value="/media/flashmediaelement.swf"/>
        <param name="flashvars" value="controls=true&file={{generateSrc(mediaUrl, 'video')}}"/>
        <!-- Image as a last resort -->
        <img ng-src="{{generateSrc(mediaPoster, 'photo')}}" width="320" height="240" title="No video playback capabilities"/>
    </object>
</video>