Videogular - Есть ли сценарий для нескольких кнопок воспроизведения видео?

Question

У меня есть Videogular работает в Wordpress. Сайт Wordpress - это мое онлайн-портфолио, и я использую Videogular для воспроизведения четырех, пяти или шести примеров видео, которые работают в AfterEffects. Я хочу кнопку воспроизведения или кнопку «своп-видео» для каждого примера AfterEffects моей работы. У меня AngularJS работает отдельно от Videogular в Wordpress, поэтому несколько кнопок воспроизведения могут быть встроены внутри или снаружи Videogular. Но я не уверен, что использовать для создания кнопок примера воспроизведения/замены для проигрывателя Videogular. Должен ли я использовать AngularJS/jQuery или Javascript? Я новичок в AngularJS, и мой jQuery сильнее моего JavaScript. Может ли кто-нибудь указать мне в правильном направлении? Большое спасибо!

KSQ

Answer 1

Вы должны использовать AngularJS, определенно.

Прямо сейчас есть ошибка, если вы хотите изменить src в видео с привязками, однако вы можете сделать это с помощью простого javascript.

Хотя вы не должны делать dom преобразования в контроллере, я думаю, что вы можете сделать исключение здесь.

В вашем main.js контроллера необходимо создать функцию, чтобы установить видео:

$scope.videos = [ 
    {url: "http://www.videogular.com/assets/videos/videogular.mp4", type: "video/mp4"}, 
    {url: "http://www.videogular.com/assets/videos/videogular.webm", type: "video/webm"}, 
    {url: "http://www.videogular.com/assets/videos/videogular.ogg", type: "video/ogg"} 
]; 

$scope.onClickVideo = function(id) { 
    $scope.setVideo(id); 
}; 

$scope.setVideo = function(id) { 
    var sourceElement = angular.element("videogular video"); 
    sourceElement[0].src = $scope.videos[id].url; 
    sourceElement[0].type = $scope.videos[id].type; 
}; 

Поскольку вы устанавливаете видео файл непосредственно к video тега вы не можете иметь любой source тег в videogular директива:

<videogular vg-width="config.width" vg-height="config.height" vg-theme="config.theme.url" vg-autoplay="config.autoPlay" vg-stretch="config.stretch.value" vg-responsive="config.responsive"> 
    <video preload='metadata'> 
     <track kind="captions" src="assets/subs/pale-blue-dot.vtt" srclang="en" label="English" default></track> 
    </video> 
    <!-- more directives --> 
</videogular> 

вы должны принять во внимание, что, возможно, вы должны контролировать видео источников для каждого браузера и операционной системы, потому что вы только можете установить один видеофайл.