将 video.js 集成到 angular 网络应用程序中
Integrating video.js in angular web app
我在尝试将 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>
以上代码对我来说工作正常。但是当我在控制器中声明视频的 url 时,出现以下错误
这里是views的代码
<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";
});
})
任何人都可以解释为什么我会收到此错误吗?
Src 无法使用 angular 语法使用 ng-src 而不是。
<source ng-src="{{video_link}}" type='video/mp4' />
Here what I did in my application controller:
$scope.generateSrc = function (file, mediaType) {
if (!!file) {
return '/media/conversation/' + mediaType + '/' + file;
}
};
In template
<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>
我在尝试将 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>
以上代码对我来说工作正常。但是当我在控制器中声明视频的 url 时,出现以下错误
这里是views的代码
<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";
});
})
任何人都可以解释为什么我会收到此错误吗?
Src 无法使用 angular 语法使用 ng-src 而不是。
<source ng-src="{{video_link}}" type='video/mp4' />
Here what I did in my application controller:
$scope.generateSrc = function (file, mediaType) {
if (!!file) {
return '/media/conversation/' + mediaType + '/' + file;
}
};
In template
<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>