Videogular - 有多個視頻播放按鈕的腳本嗎？

我有在Wordpress中運行的Videogular。 WordPress的網站是我的在線投資組合，我正在使用Videogular播放我的AfterEffects工作中的四個，五個或六個視頻示例。我想爲我的每個AfterEffects示例中的播放按鈕或「交換視頻」按鈕。我已經將AngularJS與Wordpress中的Videogular分開運行，因此可以在Videogular內部或外部構建多個播放按鈕。但我不確定使用什麼來構建視頻播放器的播放/交換視頻示例按鈕。我應該使用AngularJS/jQuery還是Javascript？我是AngularJS的新手，我的jQuery比我的JavaScript更強大。任何人都可以請我指出正確的方向？非常感謝！Videogular - 有多個視頻播放按鈕的腳本嗎？

KSQ

來源

2013-12-15 ksqInFlight

您絕對應該使用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>

你應該考慮到，也許你應該控制每個瀏覽器和操作系統的視頻源，因爲你只可以設置一個視頻文件。

來源

2013-12-16 18:37:26 elecash

謝謝你。非常感激。但我還沒有明白。我已經將函數腳本添加到'main.js'，並將更改爲上述內容。現在我得到一個空白屏幕。我不明白如何將陣列應用於每個視頻的一系列按鈕。這是我，不是你。我會檢查你的API編碼信息，但如果你至少可以告訴我爲什麼我只有一個空白DIV，其中已經應用了上述內容，我將不勝感激。而之前我有玩家，它正在加載MP4。非常感謝。 – ksqInFlight

您使用的是Github中可以找到的相同文件嗎？ https://github.com/2fdevs/videogular/tree/master/app你的'main.js'應該看起來像這樣https://github.com/2fdevs/videogular/blob/master/app/scripts/controllers/main .js但是用上面添加的函數。 – elecash

Videogular - 有多個視頻播放按鈕的腳本嗎？

回答

相關問題