Question

所以我使用Angular和video.js库。我有一个链接到保存为变量的视频，src和ngSrc属性都不适用于Angular表达式（例如=＆＃34; {{src}}＆＃34;。

示例：

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

如果我在src中使用实际链接，例如

，它可以正常工作

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

我得到的错误是

VIDEOJS：错误:(代码：4 MEDIA_ERR_SRC_NOT_SUPPORTED）不兼容找到了此媒体的来源。

任何人都知道我该如何解决这个问题？感谢。

Answer 1

这对我有用：

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（不要忘记将$ sce注入您的控制器）：

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

更新：

在做了一些研究之后，似乎还有一种替代解决方案，看起来像这样：

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

来源：HERE

Angular表达式不适用于video.js库

1 个答案: