离线(CD、拇指驱动器等)免安装 HTML +视频演示?

发布于 2024-10-07 17:45:27 字数 957 浏览 3 评论 0原文

我们公司希望将一些营销/培训内容放入 USB 拇指驱动器上以分发给我们的客户。

内容是HTML+一些嵌入的视频。这些视频(当前为 .flv)不是交互式的或类似的东西,尽管它们对内容很重要。棘手的一点是 HTML 包含需要在视频结束时运行的 Javascript。

我们的第一个想法是使用 Flash 视频包装解决方案,例如 Jwplayer。当文件是这样时,这工作得很好 托管在网络服务器上。但是,由于 Flash 的安全策略,本地(例如“file://foo.js”)Javascript 代码无法接收来自 Flash 对象的回调。此外,当本地 Web 文件包含 Flash 等 ActiveX 对象时,Internet Explorer 用户会收到令人讨厌的安全警告(他们理应如此!)。

有想法吗?

理想情况下,我们希望尽可能跨浏览器和跨平台,而不需要用户安装任何东西。但我们不能保证他们 他们将能够或愿意修改安全设置,并且我们也不能保证他们将拥有支持 HTML5 视频的浏览器。

似乎默认的行业方法是简单地将内容打包到独立的 Flash Player 可执行文件中。想知道是否可以通过其他方式完成,最好使用网络标准。

Titanium Appcelerator Desktop 将接近完美,但桌面版本并不理想不支持视频!

Our company would like to put some marketing/training content onto USB thumb drives to distribute to our clients.

The content is HTML + some embedded videos. The videos (currently .flv's) are not interactive or anything like that, though they are important to the content. The tricky bit is that the HTML contains Javascript that needs to run when the video is finished.

Our first thought was to use a Flash video wrapper solution like Jwplayer. This works fine when the files are
hosted on a web server. However, due to Flash's security policies, local (e.g. "file://foo.js") Javascript code cannot receive callbacks from Flash objects. Additionally, Internet Explorer users get nasty security warnings (as they darn well should!) when local web files contain ActiveX objects like Flash.

Ideas?

Ideally, we'd like to be as cross-browser and as cross-platform as possible without requiring users to install anything. But we can't guarantee they
ll be able or willing to screw around with security settings and we can't guarantee they'll have an HTML5-video capable browser, either.

Seems like the default industry way to do this is to simply package things up into standalone Flash Player executable. Was wondering if it could be done otherwise, preferably with web standards.

Titanium Appcelerator Desktop would be close to perfect, though the desktop version doesn't support video!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

几味少女 2024-10-14 17:45:27

好的。这是我们要采用的解决方案。

但首先,这是我们没有使用的。我研究了 Appcelerator Titanium,它承诺允许跨平台使用 HTML5+CSS 构建的桌面应用程序,使用 WebKit 渲染引擎。他们有一个桌面版本,但它几乎被忽视了,因为他们的移动版本。至关重要的是,其桌面版的 Windows 版本不支持我们需要的视频。这是一个奇怪的限制,但我不会因为他们专注于快速扩张的移动市场而批评他们。

所以,这就是我们要使用的:Mozilla Firefox,便携版。只需进行一些调整就可以很好地实现此目的。

在此示例中,我们假设我们正在为 Acme Awesome 产品进行营销演示。

  1. 重命名文件。在便携式 Firefox 安装中,将 FirefoxPortable/App/Firefox/firefox.exe 重命名为 FirefoxPortable/App/Firefox/Acme.exe ,将 FirefoxPortable/App/Firefox 目录重命名为 FirefoxPortable/App/Acme,最后将 FirefoxPortable/PortableFirefox.exe 重命名为 FirefoxPortable /Acme.exe。 (请参阅下面的屏幕截图中的资源管理器)
  2. INI 调整。FirefoxPortable/App/DefaultData/Settings/FirefoxPortableSettings.ini复制到FirefoxPortable/FirefoxPortableSettings.ini,并进行如下屏幕截图所示的调整。这将使应用程序以所需的窗口大小启动,没有 Firefox Portable 启动画面,并使用我们选择的起始页。您还需要更改此处的一些路径,以告诉它在哪里可以找到我们在步骤 #1 中更改了位置的文件。 (请参阅下面屏幕截图中的编辑器窗口)
  3. 隐藏 Firefox 应用程序文件结构。出于美观原因,您可能需要右键单击 FirefoxPortable/ 中的所有文件和文件夹,然后将它们被隐藏,除了 Acme.exe
  4. 更改标题栏。启动 Acme.exe。安装“自定义标题栏”扩展或类似的东西。使用它可以将 Portable Firefox 的文本更改为您喜欢的任何内容。 (或者,您可以编辑/FirefoxPortable/App/Acme/chrome/en-US.jar。打开.jar,您将看到locale/branding/brand.dtd >) 重新启动 Acme.exe 以查看标题栏的变化。
  5. 关闭窗口 Chrome。进入便携式 Firefox 的“查看”菜单并关闭所有 chrome - 导航栏、书签栏、状态栏等。请记住,您可以按“alt”键您的键盘可以恢复菜单栏,您的最终用户也可以。 (或者,Firefox 有几个“信息亭”样式的扩展,可以进一步锁定应用程序。但出于我的目的,我并不真正关心。)
  6. 更改应用程序图标。 使用类似 < a href="http://icofx.ro/" rel="nofollow noreferrer">IcoFx(优秀且免费)更改 FirefoxPortable/App/Acme/Acme.exe 的图标。注意:IANAL,但我相信您实际上必须从 Firefox 中删除官方 Mozilla 品牌,例如 Firefox 徽标,然后再重新分发。

最终应用程序的屏幕截图

此时,您所得到的内容与本机应用程序几乎没有什么区别。显然,有创造力的用户可以查看应用程序的目录结构,并看到您正在使用 Firefox,并且 Firefox 的所有键盘快捷键仍然处于活动状态。如果这对您来说是一个问题,那么 Firefox 的“kiosk”式扩展确实存在,其中一些扩展相当可靠,尽管我还没有测试过其中任何一个,所以我不会在这里链接到它们。再说一遍,对我来说这不是问题。

这种方法还有很大的改进空间。未来我想探索的是

  1. 各种配置调整以加快加载时间
  2. 自动启动 Acme.exe 的 autorun.inf
  3. 当然是 OSX 和 Linux 版本。
  4. 禁用便携式 Firefox 键盘快捷键的方法。 (最好的方法是什么?.ini/about:config 调整?扩展?.ini/about:config 调整应该更快)
  5. 弄清楚如何更改 /FirefoxPortable/Acme.exe 的图标。根据,可能需要重新编译,这与大多数 .exe 文件不同。

OK. Here's the solution we're going with.

But first, here's what we're not using. I looked into Appcelerator Titanium, which promises to allow cross-platform desktop applications built with HTML5+CSS, using the WebKit rendering engine. They have a desktop edition, but it's pretty much neglected in favor of their mobile edition. Crucially, the Windows version of their desktop edition doesn't support video, which we need. Kind of a weird limitation, but I'm not going to knock them for focusing on the rapidly-expanding mobile market.

So, here's what we are going with: Mozilla Firefox, Portable Edition. Works great for this purpose with a few tweaks.

In this example we'll pretend we're making a marketing presentation for Acme Awesome Products.

  1. Rename Files. In the Portable Firefox installation, rename FirefoxPortable/App/Firefox/firefox.exe to FirefoxPortable/App/Firefox/Acme.exe, rename the FirefoxPortable/App/Firefox directory to FirefoxPortable/App/Acme, and finally rename FirefoxPortable/PortableFirefox.exe to FirefoxPortable/Acme.exe. (see Explorer in screencap below)
  2. INI Tweak. Copy FirefoxPortable/App/DefaultData/Settings/FirefoxPortableSettings.ini to FirefoxPortable/FirefoxPortableSettings.ini, and make the tweaks shown in the screenshot below. This will make the app launch with the desired window size, with no Firefox Portable splash screen, and with the start page of our choosing. You'll also need to change some of the paths in here to tell it where to find the files whose locations we changed in step #1. (See editor window in screencap below)
  3. Hide Firefox App File Structure. For aesthetic reasons, you might want to right-click on all the files and folders in FirefoxPortable/ and make them hidden, except for Acme.exe.
  4. Change Titlebar. Launch Acme.exe. Install the "Customize Titlebar" extension or something similar. Use that to change Portable Firefox's text to whatever you like. (Alternately, you can edit /FirefoxPortable/App/Acme/chrome/en-US.jar. Open the .jar and you'll see locale/branding/brand.dtd) Restart Acme.exe to see your titlebar changes.
  5. Turn Off The Window Chrome. Go into Portable Firefox's View menu and turn off all of the chrome - the navbar, bookmark bar, status bar, etc. Keep in mind you can hit the "alt" key on your keyboard to get the menu bar back, and your end users can too. (Alternately, there are several "kiosk" style extensions for Firefox that will lock the app down farther. But for my purposes I didn't really care.)
  6. Change The Application Icon. Use a program like IcoFx (excellent and free) to change the icon for FirefoxPortable/App/Acme/Acme.exe. Note: IANAL, but I believe you actually must remove official Mozilla branding, such as the Firefox logo, from Firefox before redistributing it.

Screenshot of the final app

At this point you have something fairly indistinguishable from a native application. Obviously an inventive user can peak around in your app's directory structure and see that you're using Firefox, and all Firefox's keyboard shortcuts would still be active. If this is an issue for you, "kiosk"-style extensions for Firefox do exist, some of which are fairly bulletproof, though I haven't tested any of them so I won't link to them here. Again, for me this wasn't an issue.

This approach has a lot of room for improvement. Future things I'd like to explore are

  1. Various configuration tweaks to speed loading time
  2. An autorun.inf to launch Acme.exe automatically
  3. Of course OSX and Linux versions.
  4. Way to disable Portable Firefox's keyboard shortcuts. (What's the best way? .ini/about:config tweaks? Extension? .ini/about:config tweaks should be faster)
  5. Figure out how to change the icon for /FirefoxPortable/Acme.exe. According to this a recompile might be needed, unlike most .exe files.
篱下浅笙歌 2024-10-14 17:45:27

查看 Microsoft HTA - HTML 应用程序。它们是专门根据您的目的而设计的,甚至可以设置为媒体插入时的自动运行目标。您无需更改标记或 html 结构 - 只需添加标记到任何 html 文件,重命名为 .hta,然后您可以引用文件路径,就像您拥有 file:///xxx 一样,它将使用登录用户的权限来访问文件系统,而不会发出警告。

如果您需要跨平台兼容性,那么我建议您研究 Adob​​e AIR - 类似的概念,但需要更多的标记才能运行。

参考资料:

HTA 的

http://msdn.microsoft.com /en-us/library/ms536496(v=vs.85).aspx
http://en.wikipedia.org/wiki/HTML_Application

Adob​​e AIR

http://www.adobe.com /产品/空气/

Look into Microsoft HTA's - HTML Applications. They were specifically designed with your purpose in mind and can even be setup as the auto-run target on media insertion. You don't need to change your markup or html structure - just add the <HTA:Application> tag to any html file, rename to .hta and then you can reference the file path like you have it file:///xxx and it will use the logged in user's permissions to access the filesystem without warning.

If you need cross-platform compatibility then I recommend looking into Adobe AIR - similar concept but a bit more markup to get it running.

References:

HTA's

http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx
http://en.wikipedia.org/wiki/HTML_Application

Adobe AIR

http://www.adobe.com/products/air/

仙女山的月亮 2024-10-14 17:45:27

如果这只是营销/培训内容,为什么不将其嵌入到仍然可以观看视频的 PowerPoint 文件中呢?

If this is just marketing/training content, why don't you embed it in a PowerPoint file where you can still have video?

迷荒 2024-10-14 17:45:27

我正在做一个类似的项目。我也选择了 FF 便携式,但对速度不满意。我发现了另一个小型的 Mac 和 Linux 兼容浏览器。您需要先将单个.exe复制到可写磁盘以编辑设置并让它创建必要的缓存和设置文件夹(关闭浏览器中的任何写入设置以避免错误),然后您可以将其刻录到CD。

到目前为止工作得很好!

QT 网页浏览器

I am working on a similar project. I went with FF portable too, but wasn't happy with the speed. I found this other tiny, Mac and Linux compatible browser. You need copy the single .exe to a writable disk first to edit settings and have it create the necessary cache and settings folders (turn off any writing settings in the browser to avoid errors), then you can burn it to cd.

Working great so far!

QT Web Browser

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文