Video.js 博客

Matthew McClure2014-10-02

Video.js 4.9 - 现在 <audio> 也可以加入派对啦!

HTML5 音频支持

我们经常收到的一个请求是能够将 Video.js 与 <audio> 标签一起使用,现在你可以了! 用法几乎相同,你只需在 <audio> 标签上包含一个 data-setup={} 属性,或者通过 Javascript 初始化。

<audio
  id="audio_example"
  class="video-js vjs-default-skin"
  controls
  preload="auto"
  width="600"
  height="600"
  poster="/img/awesome-album-art.png"
  data-setup="{}"
>
  <source src="/audio/awesome-music.mp3" type="audio/mp3" />
</audio>

唯一的行为差异是海报图像和控件永远不会隐藏。 这允许你在播放期间保留一些类似专辑封面的东西,而不是黑色的视频元素。 因为没有有有趣的内容可以隐藏(除了海报图片),我们保留控件的显示,以模仿熟悉的音频播放器体验。

Audio Screenshot

注意:Flash 后备方案仍然不支持音频专用源,但我们希望将来能添加它。 同时,MP3 和 Ogg 源的音频播放在任何(现代)浏览器中都应该可以正常工作,该浏览器不是 IE8,所以尽情享受吧!

更多翻译!

我们我们对新的翻译方面持续的支持感到非常兴奋。 此版本包含巴西葡萄牙语、日语、意大利语、法语和韩语,以及对之前西班牙语翻译的一些改进。 我们希望看到这种趋势继续下去,因此如果你精通一门语言,请考虑提交改进或全新的本地化!

Video.js 的实际应用

Coursera 是一个教育平台,提供来自世界各地的一些顶级机构的免费在线课程。 他们已经在 Video.js 的基础上构建了用于视频交互的出色工具,甚至将在 10 月的会议上讨论他们所做的SF Video Meetup

Coursera Screenshot

新插件

videojs-wavesurfer - 使用优秀的 wavesurfer.js 库为音频文件添加可导航的波形。

完整的更改列表

  • @deedos 添加了巴西葡萄牙语翻译 (查看)
  • @baloneysandwiches 添加了 hasClass 方法 (查看)
  • @mynameisstephen 修复了一个滑块事件监听器未被清理的问题 (查看)
  • @alexrqs 清理了西班牙语翻译 (查看)
  • @t2y 添加了日语翻译 (查看)
  • @chikathreesix 修复了一个 data-setup 选项可能被忽略的问题 (查看)
  • @seniorflexdeveloper 添加了新的翻译和翻译更新 (查看)
  • @chikathreesix 导出了 videojs.Flash.embed 方法 (查看)
  • @doublex 修复了一个 IE7 向后兼容性问题 (查看)
  • @mmcc 使覆盖字幕和副标题的字体大小成为可能 (查看)
  • @philipgiuliani 添加了意大利语翻译 (查看)
  • @twentyrogersc 修复了设置海报来源时的返回值 (查看)
  • @heff 更新到 swf v4.5.0 以修复事件问题 (查看)
  • @rpless 使 VolumeMenuButton 音量通过选项卡导航更容易访问 (查看)
  • @mmcc 添加了对音频标签的支持(仅限 html5 音频)(查看)