Internet, Quick Tips
     

简单的HTML5视频播放器

Camera on side of building
警惕的眼睛

作为一名狂热的技术专家,我维护自己的家庭安全摄像头。这些摄像机流 H.264 编码 1080P 视频通过我的千兆局 LAN 到我的家庭服务器,录制 24/7 素材供将来参考。这些剪辑不仅存储在我的主服务器上,它们还通过自定义 Python 脚本进行运动处理,其结果将记录到文件中。我可以很容易地看到哪些视频剪辑包含运动,并使它更容易找到感兴趣的东西。

每个日志都包含首先检测到的帧运动、剪辑中的帧总数(将录制块状为 1 小时剪辑),最后是剪辑本身的文件名。例如,日志条目可能看起来像:

Motion at frame 6571 of 33735 in /mnt/simple-storage/cameras/garage/video/20201020/20201020213546.m4v

这是一个很好的第一步,但我宁愿不检查日志文件,除以 6,571 除以 33,735(在上面的例子中),要知道我需要跳过 19% 的方式通过某个视频文件。我宁愿懒惰, 点击一个链接。

值得庆幸的是,在 HTML5 的本机 H.264 支持下,这非常简单。将这更多的视为一种学习练习(和一个有趣的分心),我选择用100%纯JavaScript来写这个——这里没有第三方库。

上述 HTML 文件可以直接通过 Nginx(或任何其他 Web 服务器)提供,并且只接受两个查询字符串参数:

  • src – 视频剪辑的相对路径
  • offset – 包含目标帧、冒号和视频剪辑中帧总数的编码字符串(例如 66056:72026 将跳快 92% 的方式通过剪辑)

示例 URL 的完整内容为:

https://saturn.lan.whitehorn.us/~camera/player.html?src=garage/20201020/20201020211153.m4v&offset=66056:72026

脚本本身非常简单。它检查查询字符串,加载引用的文件,如果指定了偏移参数,然后使用它来计算它应该跳过的视频有多远。

这允许我更新我的日志记录输出HTML与上述player.html文件的链接(而不是以前的基于文本的日志)。现在, 当涉及到监视我的家庭安全摄像头时, 我可以更懒 🙂

About Jason

Jason 是一位经验丰富的企业家兼软件开发人员,擅长领导力、移动开发、数据同步和 SaaS 架构。他获得了阿肯色州立大学计算机科学学士学位( 学士学位.
View all posts by Jason →

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注