videojs-hotkeys, 为 video.js 添加更多热键支持

分享于 

8分钟阅读

GitHub

  繁體 雙語
Adds more hotkey support to video.js
  • 源代码名称:videojs-hotkeys
  • 源代码网址:http://www.github.com/ctd1500/videojs-hotkeys
  • videojs-hotkeys源代码文档
  • videojs-hotkeys源代码下载
  • Git URL:
    git://www.github.com/ctd1500/videojs-hotkeys.git
    Git Clone代码到本地:
    git clone http://www.github.com/ctd1500/videojs-hotkeys
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ctd1500/videojs-hotkeys
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    videojs热键

    简介

    Video.js的插件,当播放机有焦点时启用键盘热键。

    • 空格键切换播放/暂停。
    • 向右和向左方向键查找视频前进和后退。
    • 向上和向下方向键增加和减小音量。
    • M 键切换静音/取消静音。
    • F 键切换全屏关闭。 ( 不在 IE 中工作,这似乎是一个限制,脚本无法在没有鼠标单击的情况下请求全屏)
    • 双击鼠标切换全屏关闭和打开。
    • 从 0 -9跳到视频的百分比。 0为 0%,9为。

    注意:在游戏中,点击任何控制按钮,如播放/暂停。全屏或者静音,将会将焦点移到出现在热键上的玩家。 可以使用 Tab 键来突出显示控制按钮,然后按 space 键切换它们。

    重放焦点,只需点击视频,或者视频播放器底部的控制栏空部分。

    要覆盖这里行为,请将标记设置为 alwaysCaptureHotkeys。 这将使用"固定"热键。可以使用 Tab 键和 Enter/Return 键组合使用来导航和激活控制按钮。

    Empty control bar space

    用法

    包含插件:

    CDN版本

    你可以加载当前版本:

    <scriptsrc="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>

    或者总是加载最新版本:

    <scriptsrc="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>

    自承载

    <scriptsrc="/path/to/videojs.hotkeys.js"></script>

    启用插件

    将热键添加到 Videojs ready函数。 检查下面的选项是否有可用选项及其含义。

    videojs('vidId').ready(function() {
     this.hotkeys({
     volumeStep:0.1,
     seekStep:5,
     enableModifiersForNumbers:false });
    });

    命令行选项

    • volumeStep ( 十进制): 使用上下箭头键时增加/减小卷级别的百分比( 默认值): 0.1 )
    • seekStep ( 整型): 使用右和左箭头键时向前和向后寻找的秒数( 默认值: 5 )
    • enableMute ( 布尔型): 通过按下 M 键启用音量静音( 默认:true )
    • enableVolumeScroll ( 布尔型): 通过滚动鼠标滚轮来增加/减小音量( 默认: true )
    • 通过按键启用视频全屏切换( 默认为:true )
    • enableNumbers ( 布尔型): 通过按数字键来查找视频( 默认 true )
    • enableModifiersForNumbers ( 布尔型): 允许使用 Ctrl/Alt/Cmd + 数字键跳过视频,而不是切换浏览器选项卡。 默认情况下启用这里功能,原因是向后兼容 PR #35 ( 默认: true )
    • alwaysCaptureHotkeys ( 布尔型): 强制捕捉热键,即使控制元素是焦点。 可以使用 /返回键来激活控制元素( 缺省: false )
    • enableInactiveFocus ( 布尔型): 当控制栏在用户单击控制栏上的按钮后重新分配给播放机( 默认值): true )
    • skipInitialFocus ( 布尔型): 在特殊自动播放情况下停止播放机在初始播放时的焦点。 更多关于问题的信息,请参见 #44 ( 缺省: false )
    • enableJogStyle ( 布尔型): 通过按上下箭头键可以在广播样式中查找视频。 seekStep 还需要更改才能获得适当的广播风格。 这个特性和对seekStep的更改在 PR #12 ( 默认 false ) 中更多地解释了( 说明: 这不是每个人的特性,启用JogStyle将禁用音量热键)

    有更多的选项专门用来定制下面描述的热键。

    自定义热键和替代

    这里有 2种方法可用。 简单地覆盖现有热键,并创建新的自定义热键。

    替代现有热键

    重写函数可以用于更改,或者添加用作键键触发操作的键。

    你构建的任何重载函数都必须返回布尔值。 true 如果按下匹配键,或者如果不按匹配键,则为 false

    • playPauseKey ( 函数): 这里函数可以用于覆盖播放/暂停切换键( 默认键): 空间 )
    • rewindKey ( 函数): 这里函数可以重写视频中向后/向左查找的密钥( 默认键): 向左方向键) ) )
    • forwardKey ( 函数): 这里函数可以重写视频中的向前/向右搜索( 默认键): Arrow )
    • volumeUpKey ( 函数): 这里函数可以重写增加卷的密钥( 默认键): 向上 ) )
    • volumeDownKey ( 函数): 这里函数可以重写用于减少卷的密钥( 默认键): 向下 ) )
    • muteKey ( 函数): 这里函数可以重写音量静音切换的键( 默认键): 磅磅( ) )
    • fullscreenKey ( 函数): 这里函数可以覆盖全屏切换的键( 默认键): ) )

    这允许你更改全屏的键,而不是用于全屏的"f",也可以使Ctrl+Enter触发器全屏显示。 使用方法的示例:

    videojs('vidId').ready(function() {
     this.hotkeys({
     volumeStep:0.1,
     fullscreenKey:function(event, player) {
     // override fullscreen to trigger when pressing the F key or Ctrl+Enterreturn ((event.which===70) || (event.ctrlKey&&event.which===13));
     }
     });
    });

    创建新的自定义热键

    • customKeys ( 对象): 创建包含 1个或者多个子对象的对象。 每个子对象必须包含一个 key 函数和 handler 函数
      • key ( 函数): 这个函数检查选中的键是否被按下。 它必须返回一个布尔值,如果键匹配则返回。
      • handler ( 函数): 如果 key 函数的结果为 true,则这里函数运行自定义代码。
    videojs('vidId').ready(function() {
     this.hotkeys({
     volumeStep:0.1,
     customKeys: {
     // Create custom hotkeys ctrldKey: {
     key:function(event) {
     // Toggle something with CTRL + D Keyreturn (event.ctrlKey&&event.which===68);
     },
     handler:function(player, options, event) {
     // Using mute as an exampleif (options.enableMute) {
     player.muted(!player.muted());
     }
     }
     }
     }
     });
    });

    有更多的使用示例可以在示例文件的源代码中使用。


    添加  SUP  视频  
    相关文章