Videogular -有多个视频播放按钮的脚本吗？

Question

我在Wordpress中运行了Videogular。Wordpress站点是我的在线作品集，我正在使用Videogular播放我的AfterEffects作品的四个、五个或六个视频示例。我想要一个播放按钮或‘交换视频’按钮为我的作品的每个AfterEffects例子。我让AngularJS在Wordpress中独立于Videogular运行，这样就可以在Videogular内部或外部构建多个播放按钮。但是我不确定要用什么来为Videogular播放器构建播放/交换视频示例按钮。我应该使用AngularJS / jQuery还是Javascript？我刚接触AngularJS，我的jQuery比我的JavaScript更强大。有谁能给我指个方向吗？非常感谢！

KSQ

Answer 1

你应该使用AngularJS，这是肯定的。

现在有一个bug，如果你想通过绑定来改变视频中的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标记，所以在videogular指令中不能有任何source标记：

<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>

您应该考虑到，您可能应该控制每个浏览器和操作系统的视频源，因为您只能设置一个视频文件。