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

Question

我在 Wordpress 中运行 Videogular。 Wordpress 网站是我的在线作品集，我正在使用 Videogular 播放我的 AfterEffects 工作的四个、五个或六个视频示例。我想为我工作的每个 AfterEffects 示例添加一个播放按钮或“交换视频”按钮。我在 Wordpress 中让 AngularJS 与 Videogular 分开运行，因此可以在 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 标签，所以您的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>

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