将页面内容与 HTML5 视频同步(一种不同类型的网络研讨会)

如果您在软件行业工作了一段时间,您可能至少参加过一些“网络研讨会”,其中有人进行在线演示,您可以实时观看和收听。您也许可以通过聊天窗口提问,如果您幸运的话,演示者会在分配给观众提问的非常有限的时间内选择您的问题进行回答。如果您无法参加实时演示,您可以稍后观看录制内容,但您会错过问答环节。

Mozilla 开发者参与团队正在尝试一种略有不同的网络研讨会演示方法。我们将演示部分与问答部分分离。我们不是进行实时演示并进行少量问答,而是发布屏幕录制,并稍后安排时间进行在线聊天讨论。

您可以根据需要随时查看屏幕录制,并仔细查看和使用正在讨论的代码。然后,对于有疑问的人,演示者将在预定的时间内在 IRC 上讨论这些问题。您还可以与其他参与者聊天,这在典型的网络研讨会中通常是不可能的。

以下是计划中的一系列伪网络研讨会的第一个:Christian Heilmann 谈论**将页面内容与 HTML5 视频同步**。

屏幕录制

聊天

此屏幕录制的讨论将在 irc.mozilla.org 上的 #mdnlearning 频道中于以下时间举行

  • 3 月 21 日星期一,世界标准时间 10:00
  • 3 月 21 日星期一,世界标准时间 19:00

如果您没有安装 IRC 客户端(例如Firefox 的 Chatzilla 扩展),您可以通过此Mibbit 小部件访问 #mdnlearning 频道。

我们选择了聊天时段的时间,以涵盖尽可能多的时区。我们知道它们并不适合所有人。请在评论中告诉我们,您希望在发布屏幕录制和计划的聊天之间留出多长时间的准备时间。

代码

Chris 在屏幕录制中演示的代码可在 https://github.com/codepo8/Syncing-Video 获取。

关于 Chris Heilmann

HTML5 和开放网络的布道者。让我们修复它!

更多 Chris Heilmann 的文章…


8 条评论

  1. sometwothings

    这太棒了!一个建议:考虑一下 popcorn.js 能够为您的屏幕录制提供的可能性。如何在页面上添加一个代码区域,该区域实时显示屏幕录制中输入的所有代码的更改!用户可以选择在视频仍在运行时进行操作(也许使用 skywriter 或其他工具?)。并提供一个提要或其他内容,显示相关的 MDN 文章,或者一些演示网站,展示视频中使用的全新功能。或者也许……

    2011 年 3 月 8 日 15:26

  2. Axel Hecht

    我有点困惑

    if(now > old){

    实际上用于回溯时间,但再次查看,这是否仅意味着更新页面最多可能需要两秒钟?设置 now 需要 1 秒,然后递增还需要 1 秒?

    2011 年 3 月 8 日 16:46

  3. koko1215

    太棒了!!!喜欢这个博客,它帮助了我很多,尽管我对我来说过于专业的术语有点困惑……

    2011 年 3 月 9 日 01:23

  4. Katja

    非常棒的教程!非常感谢分享。如果真的能在原生视频中使用此教程介绍 video 元素,并且确实让观看者能够使用代码,那就太好了,就像 sometwothings 指出的那样。现在在电影中几乎无法阅读。

    2011 年 3 月 9 日 03:12

  5. kazé

    看起来像是 HTML 定时的完美用例:http://labs.kompozer.net/timesheets/

    您介意我使用您的演示并使用 HTML 定时对其进行重写吗?我相信这将是一种简单且可扩展的方法来解决此类需求,如果您允许我在我的网站上发布,我将很乐意进行演示。

    干杯!

    2011 年 3 月 9 日 04:15

    1. Janet Swisher

      代码可在 github 上获取(请参见文章底部),因此您可以对其进行分叉并进行更改。请分享您的成果!

      2011 年 3 月 9 日 10:43

      1. kazé

        好的,谢谢!

        2011 年 3 月 9 日 10:44

  6. Pippa Buchanan

    很棒的屏幕录制,Chris!

    我已将其推荐给 Webcraft 学校交互式开放视频与 Popcorn 学习小组的管理员,并建议他们将其作为一项学习任务。

    2011 年 5 月 2 日 09:40

本文的评论已关闭。