在angular web應用中集成video.js

我在嘗試將video.js集成到我的角應用中時遇到了一個奇怪的錯誤。在angular web應用中集成video.js

<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>

上面的代碼對我來說工作正常。但是，當我宣佈在控制器視頻的網址，它給我下面的錯誤

這裏是觀看

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

})

可以在任何一個解釋爲什麼我得到這個錯誤？

來源

2017-02-23 Neel Kamal

Src不使用ng-src而是使用角度語法。

<source ng-src="{{video_link}}" type='video/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>

來源

2017-02-23 07:16:32

嘗試，但仍然得到SAM e錯誤。 –

@Neel：請按照上面的代碼，它可以幫助你。 –

非常感謝@Dipak。但我仍然遇到同樣的錯誤。但是，當視頻託管在同一臺服務器上時，一切正常。只有當我嘗試顯示來自網址的視頻時，我纔會收到錯誤消息。 –

在angular web應用中集成video.js

回答

相關問題