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标记，因此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>

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

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

1 个答案: