我正在尝试为建筑物入口创建一个基于网络的欢迎显示屏。该项目将包括：
1) 一部 wmv 电影在数字显示屏上不断播放，直到一些访问者触摸屏幕（可以在本地或在互联网上播放，但当访问者触摸屏幕时，它必须能够转到第 2 号） )
2) 会显示几个带有部门名称的按钮，供访问者选择他们要查看的人员
3) 访问者触摸一个按钮后，系统会向该部门发送一封电子邮件
4) 感谢页面，网站应返回再次到数字1）
我的经验是html、css、php、javascript 和一些 Flash，但我愿意学习新技能。有人可以建议一些建立这个网站的好方法吗？有没有什么教程或好的网站可以让我学习，那就太好了。
非常感谢。
Sam :)
编辑：
非常感谢 Vigrond 和 Lloyd！你们的回答同样有帮助，所以我将使用 html5 和 javascript。
我还有几个问题，希望你们或有人可以帮助我。 （感谢任何部分的问题帮助）
-
由于这将是一个信息亭，同一部电影将不断播放，每次客户联系我们后，都会显示“谢谢”页面简短地返回到第一个电影页面。我的问题是如何才能不让每次有顾客时都一次又一次地加载电影？因为显示的本地数据空间将受到限制。
-
我一直在想，如果我只为整个过程创建一个页面，并使用 JavaScript 幻灯片将每个页面作为一个 div，这样电影 div 将被隐藏，这样就不需要再次重新加载，这会解决第 1）个数据空间问题吗？
-
我正在考虑使用水平幻灯片，例如 http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery 我怎样才能使最后一个 div（谢谢）显示大约 5 秒并再次转到第一个 div（电影）？
非常感谢！ :)
I'm trying to create a web based welcome display for a building entrance. The project would include:
1) A wmv movie play constantly on the digital display until some visitors touch the screen (this can be played either locally or on the internet, but it has to be able to go to number 2 when visitors touch the screen)
2) A couple of buttons with department names show up for visitors to choose who they are here to see
3) After the visitor touch on one button, an email is sent to the department
4) Thank you page, the site should go back to the number 1) again
My experience is html, css, php, javascript, and some Flash, but I'm open to learn new skills. Can someone please suggest some good ways to build this site? Is there any tutorials or good sites I can learn from, that would be a bonus.
Thanks very much.
Sam :)
Edit:
Thanks very much Vigrond and Lloyd! You guys' answers are equally helpful, so I'll use html5 and javascript.
I have a couple of further questions, I hope you guys or someone can help me. (Any part of questions' help is appreciated)
-
Since this is going to be a kiosk, the same movie is going to be played constantly, everytime after the customer has contacted us, the 'thank you' page is going to show briefly and go back to the first movie page. My question is how can I not let the movie load again and again everytime when there is a customer? Because the local data space for the display is going to be limited.
-
I've been thinking if I just create one page for the whole process and use a javascript slide to make each page as a div, so the movie div is going to be hiden so it doesn't need to be reloaded again, would that fix number 1) data space concern?
-
I'm thinking of using a horizontal slide like http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery How can I make the last div (thank you) to show about 5 secs and go to the first div (movie) again?
Thanks very much! :)
发布评论
评论（2）
这可以纯粹使用 html5/javascript（+php 用于电子邮件发送）来完成。谷歌浏览器还有一个 -kiosk 模式，可以启用全屏。
我可能会使用 HTML5 视频以及 jQuery 循环插件之类的东西。在视频 onclick 处理程序中，我只需循环（）到下一张“幻灯片”。您可以添加淡入、淡出、幻灯片等效果。
如果您想变得更花哨，移动框架（例如 jQuery mobile 或 Sencha mobile）也可能是您的盟友（具有熟悉的美观界面和炫酷的过渡）
This can be purely done using html5/javascript (+php for the email sending). Google Chrome also has a -kiosk mode, that will enable fullscreen.
I would probably use HTML5 video, along with something like the jQuery cycle plugin. On the video onclick handler, I would just cycle() to the next 'slide'. You can put in effects such as fadein, fadeout, slide, etc.
If you wanna get fancy, a mobile framework such as jQuery mobile or Sencha mobile may be right up your ally as well, (with aesthetic familiar interfaces and cool transitions)
除了一些用于发送电子邮件的后端 PHP 之外，这个简单的应用程序可以使用普通的旧式 HTML5、CSS 和 Javascript 来构建。除非必要，否则我不会使用 jQuery 或 jQuery 插件来使其膨胀。
我不建议使用 WMV 内容，不过，任何主要浏览器都不支持这种专有格式。为了确保最大程度的浏览器支持，请使用 WebM 等开放格式对媒体进行编码：
http://www.webmproject.org/
beside some backend PHP to send email, this trivial app could be built using plain old HTML5, CSS and Javascript.. I wouldn't bloat it with jQuery or jQuery plug-ins unless necessary..
I don't recommend using WMV content, though - this proprietary format is not supported by any of the main browsers.. To ensure maximum browser support, encode you media using an open format like WebM:
http://www.webmproject.org/