Как использовать видеоигр с угловым и видеоисточником с сервера?

Question

Я использую видео js player на своем веб-сайте. (http://videojs.com/getting-started/) Я использую AngularJS. Вот моя проблема.

Сначала я попытался использовать обычные видео js-коды, как показано в примере.

<video id="my-video" class="video-js" controls preload="auto" width="607" height="343" 
      poster="http://demo.jpg" 
      data-setup='{"loop":false,"autoplay":false}'> 
     <source ng-src="{{ moblileURL }}" 
       type='video/mp4'> 
     <p class="vjs-no-js"> 
      To view this video please enable JavaScript, and consider upgrading to a web browser that 
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
     </p> 
    </video> 

Я использовал src как {{mobileURL}}, потому что это загрузка с сервера. И вот мой код углового контроллера.

videoService.viewVideoByVidId(videoId, "VideoMobile").then(function (data) { 
     $scope.moblileURL = data.flvurl; 
     console.log("FLV URL For Mobile : ", $scope.moblileURL); 
    }); 

Это место, где я назначаю url для varibale. Когда я использую такой код, я получаю следующую ошибку.

Can't interpolate: {{ moblileURL }} Error: [$sce:insecurl] http://errors.angularjs.org/1.2.20/ $sce/insecurl?p0=http%...

А затем я использую функцию, подобную этой, и вижу здесь код.

$scope.moblileURL = $sce.trustAsResourceUrl(data.flvurl);

Тогда также я получаю сообщение об ошибке .. Это ошибка.

video.js:19296VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Затем я попытался использовать специальную директиву. Это репозиторий github для этого кода. https://github.com/LonnyGomes/vjs-video. В этом коде я получаю ту же ошибку. Пожалуйста, кто-нибудь скажет мне, как это исправить? Это вторая директива, которую я пробовал до сих пор.

<video class="video-js vjs-default-skin" controls preload="auto" 
      width="607" height="343" poster="http://demo.jpg" 
      vjs-video> 
     <source src="{{ moblileURL }}" type="video/mp4"> 
    </video> 

Как это сделать правильно? Может ли кто-нибудь предложить мне лучший способ?

Answer 1

У меня была та же проблема. Не могу объяснить, почему, но я создал настраиваемую директиву, которая обертывает тег <video>; в функции связи я вручную вставить исходный тег:

link: function(scope, element, attrs) { 
    angular.element(element).find('video').append("<source src='" + scope.src + "' type='" + scope.type + "' />") 
} 

и это работает ... Возможно, при загрузке библиотеки videojs находит источник тегов, не ЦСИ еще интерполированное, поэтому он выходит из строя ...

Answer 2

При использовании vjs-video вы можете использовать привязку данных для определения местоположений источников. Когда данные будут обновлены, директива vjs-video загрузит для вас видео.js. Можно определить следующие данные:

$source.media = { 
    sources: [ 
     { 
      src: 'http://video-js.zencoder.com/oceans-clip.mp4', 
      type: 'video/mp4' 
     }, 
     { 
      src: 'http://video-js.zencoder.com/oceans-clip.webm', 
      type: 'video/webm' 
     } 
    ], 
    tracks: [ 
     { 
      kind: 'subtitles', 
      label: 'English subtitles', 
      src: 'assets/subtitles.vtt', 
      srclang: 'en', 
      default: true 
     } 
    ], 
    poster: 'http://video-js.zencoder.com/oceans-clip.png' 
}; 

Этот объект может затем можно ссылаться в директиве:

<video class="video-js vjs-default-skin" controls 
     preload="auto" vjs-video vjs-media="media"> 
</video> 

Документация vis-media можно найти here. Для полного примера взгляните на это gist.