3p-videogular-youtube 中文文档教程

Question

videogular-youtube

Videogular youtube 插件存储库

Install

Bower

使用 Bower 安装 Videogular youtube 插件：

bower安装 videogular-youtube

在文件夹 bower_components\videogular-youtube 中，您还应该找到 html 部分，您应该在 .\views\videogular\插件\youtube\。

NPM

使用 npm 安装 Videogular youtube 插件：

npm install videogular-youtube

How to use

添加指令，和视频源到您的 HTML：

<videogular vg-player-ready="onPlayerReady" vg-theme="config.theme.url" vg-autoplay="config.autoPlay">
                    <vg-media vg-src="config.sources" vg-youtube="rel=1;showinfo=1"></vg-media>

                    <vg-controls vg-autohide="config.autoHide" vg-autohide-time="config.autoHideTime">
                        <vg-play-pause-button></vg-play-pause-button>
                        <vg-timedisplay>{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
                        <vg-scrubBar>
                            <vg-scrubbarcurrenttime></vg-scrubbarcurrenttime>
                        </vg-scrubBar>
                        <vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
                        <vg-volume>
                            <vg-mutebutton></vg-mutebutton>
                            <vg-volumebar></vg-volumebar>
                        </vg-volume>
                        <vg-fullscreenButton></vg-fullscreenButton>
                    </vg-controls>

                    <vg-poster-image vg-url='config.plugins.poster.url'></vg-poster-image>
                    <vg-buffering></vg-buffering>
                    <vg-overlay-play vg-play-icon="config.theme.playIcon"></vg-overlay-play>

                    <vg-poster-image vg-url='config.plugins.poster.url'></vg-poster-image>
                    <vg-buffering></vg-buffering>
                    <vg-overlay-play vg-play-icon="config.theme.playIcon"></vg-overlay-play>
</videogular>

此外，您需要将 youtube 插件和 videogular 添加到您的应用程序：

"use strict";
angular.module("videogularApp",
    [
        "controllers",

        "com.2fdevs.videogular",
        "com.2fdevs.videogular.plugins.controls",
        "com.2fdevs.videogular.plugins.overlayplay",
        "com.2fdevs.videogular.plugins.buffering",
        "info.vietnamcode.nampnq.videogular.plugins.youtube"
    ]
);

或使用 require

"use strict";
angular.module("videogularApp",
    [
        // ...
        require('videogular-youtube');
        // ...
    ]
);

这就是全部:)

Demo

在这里您可以在 Codepen 上看到一个演示：

http:// codepen.io/2fdevs/pen/qOBRpO

A note on mobile fullscreen support

YouTube iframe API 不提供使视频全屏显示的编程方式。 如果为 YouTube 视频启用了 Videogular 全屏按钮，它将不起作用。

虽然在 Android 上使 iframe 或 videogular 元素全屏可以获得良好的效果，但目前在 iOS 上不支持，只能制作 video元素全屏。 在 iPad 上支持全屏 YouTube 视频的唯一方法是显示 YouTube 控件并允许用户点击全屏按钮。 如果启用了 YouTube 控件，请确保将覆盖 iframe 的任何 videogular 元素，例如 vg-controls、vg-overlay-play 和 vg-poster 被禁用，以便用户可以与 YouTube iframe 内的控件进行交互。

Donate

如果项目对你有帮助，你可以捐助我

• Paypal: chienthan1612@gmail.com
• Bitcoin: 1LKyH1jTP8Agd8FakpvydCP87HQzL85cFx

Install Videogular

使用 Bower 安装 Videogular：

bower install videogular

Install themes

安装 Videogular 主题与 Bower：

bower install videogular-themes-default

Install plugins

安装 Videogular 插件与 Bower:

bower install videogular-buffering

bower install videogular-controls

-poster

Documentation

bower install videogular 在 Videogular 的项目 Wiki 上可用。

License

麻省理工学院许可证 (MIT)

版权所有 (c) 2014 NamPNQ

特此免费授予任何获得 本软件和相关文档文件（“软件”），处理 软件不受限制，包括但不限于以下权利 使用、复制、修改、合并、发布、分发、再许可和/或出售 软件，并允许获得软件的人这样做， 受以下条件约束：

上述版权声明和本许可声明应包含在所有 软件的副本或重要部分。

本软件“按原样”提供，不提供任何形式的明示或保证 暗示的，包括但不限于对适销性、适用性的保证 用于特定目的和非侵权。 在任何情况下，作者或 版权所有者应对任何索赔、损害或其他责任负责，无论 在合同、侵权行为或其他行为中，源于、源于或源于 与软件的连接或软件的使用或其他交易。