BurnsBox Beta：一个简单HTML5多媒体演示应用程序

I’ve been interested in creating a simple in-browser “screensaver” app for a long time. This early beta, currently supported only in Chrome, creates a “Ken Burns effect” for selected images from your local network with an optional custom soundtrack: use the controls above to start the demo. If you don’t have Chrome, a video is included below.

很长时间以来，我一直对创建一个简单的浏览器内“屏幕保护程序”应用程序感兴趣。 此早期测试版目前仅在Chrome中受支持 ，并通过可选的自定义配乐为本地网络中的选定图像创建“肯恩·伯恩斯效果”：使用上述控件开始演示。 如果您没有安装Chrome，则会在下面包含视频。

The app uses a few features that I’ve talked about previously, including the color input and Fullscreen API. It also has a few I’ve yet to talk about in depth, such as the Web Animation API and the file input. I’ll leave technical details for discussion in future articles, including the interesting fact that, despite appearances and common assertion, we can access local files via the file input.

该应用程序使用了我之前谈到的一些功能，包括颜色输入和Fullscreen API 。 我还需要深入讨论一些内容，例如Web Animation API和file输入。 我将在以后的文章中讨论技术细节，包括一个有趣的事实，尽管出现了一些常见的断言，但我们仍可以通过file输入来访问本地文件。

There are many improvements I’ve yet to make to the code:

我还需要对代码进行许多改进：

• Despite the enhanced performance of the Web Animation API, there are still sometimes a few janky moments during the translation of the images across the screen. My first priority is tracking down the source of those issues
  尽管Web动画API的性能得到了增强，但是在整个屏幕上转换图像时，有时仍然会有一些混乱的时刻。 我的首要任务是找出这些问题的根源
• Obviously cross-browser support is important: unfortunately the polyfill for Web Animation seems to have some issues at the moment. This is not quite the issue it might be, as I assume that presenters have a choice in which browser they’d like to use for a screensaver presentation.
  显然，跨浏览器的支持很重要：不幸的是，Web Animation的polyfill目前似乎有一些问题。 因为我认为演示者可以选择使用哪种浏览器来进行屏保演示，所以这可能不是问题。

• The random motion of the images needs to be refined: sometimes it is too random, sometimes not enough.

  图像的随机运动需要细化：有时它太随机，有时还不够。

• A sort and edit option as well and drag and drop for media would be useful, as would the ability to add video.
  媒体的排序和编辑选项以及拖放功能将非常有用，添加视频的功能也将非常有用。

Right now you can contribute to or fork the GitHub or CodePen repos; I look forward to reading your feedback!

现在，您可以为GitHub或CodePen仓库做出贡献或分叉； 我期待着您的反馈！

翻译自: https://thenewcode.com/965/BurnsBox-Beta-A-Simple-HTML5-Multimedia-Presentation-App