ECL 视频组件

npm 软件包 : @ecl/video

npm install --save @ecl/video

参数

• "海报" (字符串)(默认:")视频海报图像的URL
• "控制权" (boolean) (默认:真实) 显示视频控制
• "自动游戏" (boolean) (默认: 假) 自动播放视频
• "被谋杀" (boolean) (默认:虚假) 关闭视频
• "滚" (boolean) (默认:虚假) 循环视频
• "动物" (boolean) (默认:虚假) 在海报图片上应用缩放动画
• "sr video label" (中文(简体) ) (字符串)(默认为:")视频项目的屏幕阅读器标签
• "sr video player" (英语) (字符串)(默认为:")视频播放器的屏幕阅读器标签
• "来源" (阵列) (默认: []) 视频源文件; 格式 :
  • "src" (字符串)(默认为:") 源文件 URL
  • “类型”(字符串)(默认为:'') MIME 类型,例如“video/mp4”
• "轨道" (阵列) (默认: []) 标题/子标题音轨; 格式 :
  • "src" (字符串)(默认为:") track 文件 URL
  • "kin" (字符串)(默认为"'") 音轨类型,如"captions","子标题"
  • "src lang" (字符串)(默认为"'") 音轨语言代码,如"en"
  • "label" (字符串)(默认为:"") 音轨标签, 如"英语"
• "超级" (字符串) (默认:") 视频元素的额外类
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/video/video.html.twig' with { 
    poster:  
      'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg',  
    sources: [ 
      { 
        src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4', 
        type: 'video/mp4', 
      }, 
      { 
        src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm', 
        type: 'video/webm', 
      }, 
    ], 
    tracks: [ 
      { 
        src: '/captions/bunny-en.vtt', 
        kind: 'captions', 
        src_lang: 'en', 
        label: 'English', 
      }, 
      {
        src: '/captions/bunny-fr.vtt', 
        kind: 'captions', 
        src_lang: 'fr', 
        label: 'French', 
      }, 
    ], 
} %}