I am looking for a script that can be embedded within a webpage and combine three specific functions within a nicely laid out, extendable ‘panel’:
1) play a randomly selected video
2) display a slide-out ‘responses’ panel if the video has been muted (or volume set to zero) and hide that panel if volume is restored
3) provide a message area for the site visitor to enter their name, location, email address and submit questions
4) must work in all recent versions of all major browsers (especially in IE6-9) plus mobile devices (so Flash is not an option)
The Video
———
Each of the randomly selectable videos should give the impression of playing continuously based on a given start time and date, and visitors to the site should be dropped into their randomly selected video at the relevant point, based on the time and date of their arrival on the page.
Think of this like a 24 hour, multi-theatre, continuous play cinema where each movie begins again as soon as the previous showing is over so people start watching their initial movie starting from the moment they entered the relevant theatre.
For example, assume that video 1 is 28 minutes and 33 seconds long and the start time is 2011-09-02 13:03:00 UTC
If a visitor arrives at the page at 2011-09-02 13:06:22 UTC then they should see the video appear and begin playing 3m 22s into that video.
If a visitor arrives at the page at 2011-09-02 13:48:44 UTC then they should see the video appear and begin playing 17m 11s into what would effectively be the 2nd showing of that video.
Before randomly selecting a video, the script should check for a cookie to determine which (if any) of the available videos may have been previously viewed by the visitor and only select from the remaining list of unviewed videos. If all videos have been viewed then the “already viewed” cookie should be cleared and the visitor treated as a first-time visitor. If cookies are disabled then the visitor would also be treated as a first-time visitor.
If the viewer has not closed the page by the time the initial video reaches the end, a randomly selected *unviewed* video should be played from the beginning and the cookie updated. This process should repeat (including clearing the “already viewed” cookie, as above) until the page is closed.
The Reponses Panel
——————
Whenever the volume is muted or set to zero, the responses panel should slide out from below the video, extending the overall depth of the embedded ‘panel’ and pushing the message panel beneath it further down the page.
When the reponses panel opens, it should always be empty.
After an initial ‘welcome’ message, a new, random response paragraph (from a provided list drawn from a MySQL database) needs be added to any text already displayed within the panel every few seconds based on a definable delay plus a random variation. The response panel should also auto-scroll so that the latest entry is in view.
If the video is unmuted or the volume level raised above zero then then responses panel should slide back up and disappear again.
The Message Panel
—————–
This section will initially contain fields for name, location and email address (which should be auto-filled if appropriate session or query variables are detected) plus a text area for the visitor to enter questions and submit them via email and/or directly into a MySQL database.
Once a question has been submitted, a “Your question was submitted” confirmation should be shown and the text area cleared so that it is ready for the next question.
Validation will be required to ensure that a name, location, email address and message have been entered (and that the email address is valid) before submission is allowed.
Once the initial question has been submitted, the name, location and email address fields can be hidden and the depth of the ‘panel’ reduced.
I’ve uploaded an image which shows essentially how the embedded ‘panel’ should look and how it should function / change displayed elements depening on volume setting and/or initial / subsequent question submission.
Important: Availability via Skype is essential for this project
