Integrating video.js in angular web app

Question

I am facing a strange error while trying to integrate video.js in my angular app.

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

Above code is working fine for me. But when I declare the url of video in controller, it is giving me following error

Here is the code of 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>

And here is my controller

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

})

Can any one explain why I am getting this error?

Dipak · Accepted Answer · 2017-02-23 07:22:14Z

1

Src is not working with angular syntax use ng-src instead of.

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

edited Feb 23, 2017 at 7:22

answered Feb 23, 2017 at 7:16

Dipak

2,3065 gold badges26 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Neel Kamal Over a year ago

Thanks a lot @Dipak. But I am still getting the same error. However everything works fine when video is hosted on the same server. I am getting error only when I am trying to display video from url.

Dipak Over a year ago

Can you create a plunkr so I can give you a solution.

Dipak Over a year ago

There may be a file name issue just try to rename and review it.

Dipak Over a year ago

Refer : docs.angularjs.org/api/ng/service/$sce service that will helpful and one more thing rather than to use angular.element().ready you may use it via directive.

Neel Kamal Over a year ago

Hi Dipak. Thanks a lot. $sce.trustAsResourceUrl(value) service worked for him. Please add it in answer. I will accept it.

Collectives™ on Stack Overflow

Integrating video.js in angular web app

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related