CODEWITHSUNDEEP
javascriptjqueryangularjsvideo.js
Alexander Donets
Alexander Donets

Reputation: 637

Angular expressions don't work with video.js library

So I'm using Angular and video.js library. I have a link to a video saved as a variable and neither src nor ngSrc attributes don't work with Angular expressions (e.g ="{{src}}".

Example: 

<div class="section-video" >
           <video class="video-js vjs-default-skin" width="640" height="380" controls
                  data-setup='{ "aspectRatio":"640:380", "playbackRates": [1, 1.5, 2] }'>
               <source ng-src="{{item.video}}" type='video/mp4'>
           </video>
      </div>

jquery: 

  $(function(){
        if (document.querySelector(".video-js")) {
            var player = videojs(document.querySelector(".video-js"));
        }
    });

It works fine if I use an actual link in src such as 

<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4'>

The error I'm getting is

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

Anyone has any idea how do I work around this problem? Thanks.

Upvotes: 0

Views: 654

Answers (1)

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

This worked for me:

HTML:

<div class="section-video" >
  <video class="video-js vjs-default-skin" width="640" height="380" controls data-setup='{ "aspectRatio":"640:380", "playbackRates": [1, 1.5, 2] }'>
    <source ng-src="{{trustSrc(item.video)}}" type='video/mp4'>
   </video>
</div>

JavaScript (don't forget to inject $sce into your controller):

$scope.trustSrc = function(src) {
  return $sce.trustAsResourceUrl(src);
};

UPDATE:

After doing some research, there appears to be an alternative solution to mine as well that would look something like this:

HTML:

<div class="section-video" >
  <video class="video-js vjs-default-skin" width="640" height="380" controls data-setup='{ "aspectRatio":"640:380", "playbackRates": [1, 1.5, 2] }'>
    <source ng-src="{{item.video}}" type='video/mp4' html5vfix>
   </video>
</div>

JavaScript:

app.directive('html5vfix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            attr.$set('src', attr.vsrc);
        }
    }
});

Source: HERE

Upvotes: 1

Related Questions