Videogular AngularJS：绑定vg-src为何该代码能够正常运行

咱们一步步拆解这段代码和背后的逻辑，就能明白它为啥能正常跑起来了：

1. <vg-next-video>是Videogular的内置指令 #

这个指令是Videogular专门为自动切换播放视频列表设计的，本身就封装了视频加载、切换的核心逻辑，只要配置正确的参数，就能直接触发功能。

2. 两个关键属性的作用完全匹配你的需求 #

你用到的两个属性vg-src和vg-time，刚好命中了指令的核心配置点：

• vg-src="'data/media-files.json'"：指定了视频列表的数据源路径。Videogular会自动请求这个JSON文件，解析里面的视频信息。
• vg-time="3000"：设置的是「当前视频播放结束后，等待多久切换到下一个视频」，这里的3000代表3000毫秒（也就是3秒），时间到了就会自动加载下一组视频源。

3. 你的JSON文件结构完全符合Videogular的预期 #

你提供的media-files.json是一个二维数组，这个格式刚好是<vg-next-video>要求的：

• 外层数组的每一个子元素，对应一个要播放的视频项；
• 每个子数组里的对象，是同一个视频的不同格式源（比如mp4、webm）——这是为了适配不同浏览器的格式支持，Videogular会自动选择当前浏览器能播放的格式。

举个例子，你的JSON里第一个子数组：

[
  {"src": "http://static.videogular.com/assets/videos/videogular.mp4", "type": "video/mp4"},
  {"src": "http://static.videogular.com/assets/videos/videogular.webm", "type": "video/webm"}
]

这就是一个完整的视频项，包含了两种格式的源，Videogular能正确识别并加载播放，播放完之后等待3秒，就会切换到第二个子数组对应的视频。

总结 #

这段代码能生效，本质是指令的属性配置正确+数据源结构完全匹配Videogular的要求，刚好触发了<vg-next-video>封装好的自动切换播放逻辑。

内容的提问来源于stack exchange，提问作者dansasu11