Play Multipule quicktime movies on web page


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 13 of 13

Thread: Play Multipule quicktime movies on web page

  1. #1
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263

    Cool Play Multipule quicktime movies on web page

    I have a project with many quicktime .mov files that I want my users to be able to play.

    When I prep the .mov file for use on the web it generates all of the files I need and includes the code needed to allow the .mov file to play on a web page.

    If I copy and paste this code into my web page it shows that file and allows the user to play it; but if I paste the code for all of my files it would take a great deal of room to show them all.

    I need to know how to create one viewing area and a seperate list of available mov files. When the user clicks on a file it should load that file into the viewing area to be played.

    I have no idea how to do this!
    Thanks in advance for your help!

  2. #2
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263

    Thumbs up

    I went to the Quicktime website and found some examples there, but for the longest time I could not get it to work. Finally I got it working. Here is the test version that I got working first:

    This part goes in the <head> section of your html page:
    Code:
    <!-- This section allows you to play quicktime video files from your website -->
    <script src="http://www.apple.com/library/quicktime/scripts/ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
    <script src="http://www.apple.com/library/quicktime/scripts/qtp_library.js" language="JavaScript" type="text/javascript"></script>
    <link href="http://www.apple.com/library/quicktime/stylesheets/qtp_library.css" rel="StyleSheet" type="text/css" />

    This part goes anywhere within the <body> section:
    Code:
    	<div id="uniplayer" align="center">
    	<!-- remember to add 16 to the height for control bar -->
    	<script language="javascript" type="text/javascript">
    	QT_WriteOBJECT('videos/movie1/movie1.mov', '320', '256', '', 'id', 'movie1', 'enablejavascript', 'true',  'AUTOPLAY', 'False', 'SCALE', 'Aspect');
    	</script> 
    	</div>
    	<p align="center">
    	<!-- SetURL: ALL new URL's must be relative to any previously loaded URL -->
    	<a href="javascript:document.movie1.SetURL('../movie1/movie1.mov');">
    	<img src="videos/movie1/movie1-thumb.gif"></a> 
    	<a href="javascript:document.movie1.SetURL('../movie2/movie2.mov');">
    	<img src="videos/movie2/movie2-thumb.gif"></a> 
    	<a href="javascript:document.movie1.SetURL('../movie3/movie3.mov')">
    	<img src="videos/movie3/movie3-thumb.gif"></a> 
    	</p>
    Notice the comments I colored Red, They are important or quicktime may not find the files to play.

    This code loads the first movie and waits for the user to start it, or they can click on one of the thumbnail images and it will load it and play it.

    Have Fun!

  3. #3
    Join Date
    Jun 2009
    Posts
    4
    I can't get this to work either... and it's exactly what I'm trying to do

    Am I having a problem with relative paths? I'm creating the site on my computer and the source url of my QT_WriteOBJECT is 'Quicktimes/mov1.mov'

    I have 'autoplay', 'true' and on page load mov1.mov starts playing (as hoped)

    All the quicktimes are in the same folder so, relative to mov1.mov, mov2.mov should be set:

    Code:
    <a href="javascript:document.movie1.SetURL('mov2.mov');">
    ...right? Because it's not happening...

    Or am I being boneheaded...?

  4. #4
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    I modified my test case to look like your setup and it works fine. Here is the modified version of the code:
    Code:
    	<div id="uniplayer" align="center">
    	<!-- remember to add 16 to the height for control bar -->
    	<script language="javascript" type="text/javascript">
    	QT_WriteOBJECT('Quicktimes/mov1.mov', '320', '256', '', 'id', 'movie1', 'enablejavascript', 'true',  'AUTOPLAY', 'true', 'SCALE', 'Aspect');
    	</script> 
    	</div>
    	<p align="center">
    	<!-- SetURL: ALL new URL's must be relative to any previously loaded URL -->
    	<a href="javascript:document.movie1.SetURL('mov1.mov');">
    	<img src="'Quicktimes/mov1-thumb.gif"></a> 
    	<a href="javascript:document.movie1.SetURL('mov2.mov');">
    	<img src="'Quicktimes/mov2-thumb.gif"></a> 
    	<a href="javascript:document.movie1.SetURL('mov3.mov')">
    	<img src="Quicktimes/mov3-thumb.gif"></a> 
    	</p>
    Things to be aware of:
    - All the url's must use the forward slash '/' rather than the backwards slash '\' that windows likes to use.
    - File names and paths are effected by case so 'Quicktimes' is different than 'quicktimes'
    - The script embedded in the link tags '<a></a>' references the object by the ID so the names must match:
    QT_WriteOBJECT('Quicktimes/mov1.mov', '320', '256', '', 'id', 'movie1', 'enablejavascript', 'true', 'AUTOPLAY', 'true', 'SCALE', 'Aspect');
    <a href="javascript:document.movie1.SetURL('mov1.mov')">

    Hope this helps!

  5. #5
    Join Date
    Jun 2009
    Posts
    1
    Thanks for your response! I feel I'm an ace away from solving this (I've been wrestling with it for a week)... but, for some reason I still can't get it working.

    My actual code is:
    Code:
    <script language="JavaScript" type="text/javascript"><!--
    if (isQTInstalled()){QT_WriteOBJECT(
    'Quicktimes/mov1.mov', '100%', '100%','',
    'controller', 'true', 
    'scale','aspect',
    'autoplay','true',
    'cache','false',
    'bgcolor','',
    'SaveEmbedTags','true', 
    'ID','movie1', 
    'EnableJavaScript','true'
    );}
    else
    {document.write('<a href="http://www.apple.com/quicktime/download/"><img src="media/getQT7freeDownload.jpg"  width="440" height="180"  border="0"></a>');}
    // --></script>
    with the thumbnails as:
    Code:
    <a href="javascript:document.movie1.SetURL('mov1.mov');" class="thumbnail" onMouseOver="MM_effectAppearFade('thumb1', 0, 0, 100, false)" onMouseOut="MM_effectAppearFade('thumb1', 0, 100, 0, false)">
    <img src="thumbs/mov1.gif" alt=""/></a>
    <a href="javascript:document.movie1.SetURL('mov2.mov');" class="thumbnail"  onMouseOver="MM_effectAppearFade('thumb2', 0, 0, 100, false)" onMouseOut="MM_effectAppearFade('thumb2', 0, 100, 0, false)">
    <img src="thumbs/mov2.gif" alt=""/></a>
    Mov1.mov plays on page load, but nothing when the thumbnails are clicked.

    ... any ideas?

  6. #6
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    I don't see anything wrong with what you have so far, but then I thought I would try my tests inside other browsers and found that it only works inside Internet Explorer. Non of the other browsers worked. (Netscape, Opera, Firefox, Safari). They act just like yours, the initial movie loads and plays but the links have no effect.
    One last note: I am using Internet Explorer 8, so I don't know if earlier versions work or not. Interesting thing is that I got the code from Apple's Quicktime website, so you would think it should work in other browsers, especially Safari, Apple's own browser?

  7. #7
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    Ok, I found the fix to make it work in other browsers as well as IE8.
    Both the Object ID and the Embed NAME must have the same value.

    You can get to the individual properties of each element by prefixing them
    with 'obj#' for the OBJECT properties and 'emb#' for the embed paramaters.

    Here is the change:
    Code:
    QT_WriteOBJECT('videos/movie1/movie1.mov', '100%', '100%', '', 
    'emb#NAME' , 'movie1' , 
    'obj#id' , 'movie1', 
    'EnableJavaScript', 'True', 
    'AutoPlay', 'True', 
    'Scale', 'Aspect', 
    'SaveEmbedTags', 'True');

  8. #8
    Join Date
    Jun 2009
    Posts
    4
    Haha - you must've just beaten me by minutes...

    I also now have it working in Safari/Firefox/Opera

    I know this is kind of off topic - but maybe you have some insight into how to set a qt's background so that it is transparent in Firefox/Opera?

    'bgcolor', '' is transparent in Safari only...

  9. #9
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    I checked the Quicktime online documentation for bgcolor, and there is nothing about setting the background to transparent. In fact it was very specific about what you could use for color values. Even though Safari does it, it is not in the documentation so other browsers are not likely to support that option.

  10. #10
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    I was thinking about your background situation. If your movies all have the same aspect ratio and you set the width and height so that they also have the same aspect ratio, then the background would not be visible. I did this myself for my own project. Also, after you calculate the width and height values based on the aspect ratio, you would then add the extra 16 to the height for the contol bar.

  11. #11
    Join Date
    Jun 2009
    Posts
    4
    Yup.. the thing is I'm using a straightforward expanding table css to resize and center the qts based on user browser size with height & width 100% and 'scale', 'aspect'. Of course, in reality the embedded object expands to the full browser width.

    I did toy with a solution using intrinsic ratios - it did a great job containing the qts but only resized based on browser width. It's a really pretty cool piece of css - if you're interested you can find it here:

    http://www.alistapart.com/articles/c...ios-for-video/

    You'll forgive me, I hope, if I pick your brain (there doesn't seem to be a lot of ppl out there with much experience coding for qt).... I have an issue displaying the title to a movie that has loaded into the page either via qtnextn or an embedded HREF (in other words without an 'on click' event.

    Do you think it might be possible to somehow extract the title of a currently playing movie using the string GetUserData(string type) method and 'Šnam' ?

  12. #12
    Join Date
    Aug 2004
    Location
    Orange, California
    Posts
    1,263
    (there doesn't seem to be a lot of ppl out there with much experience coding for qt)
    That's pretty sad considering I have never used Quicktime in a web page before.
    This is my first project to do so and why I started this thread in the first place.

    If the movie name is what you are after I would think that should work.
    You might also try the get and set movie name functions as well:

    string GetMovieName()
    void SetMovieName(string movieName)

  13. #13
    Join Date
    Jun 2009
    Posts
    4
    Yeah.. it's pretty tragic

    I'm gonna start working on the self loading titles - and any good stuff I figure out, I'll post back....

    I was also thinking about the qt backgrounds - since the object now has an ID when it loads into the page it should be possible to style it in the document - rather than passing attributes. That could get around the plugin's inaccessibility to other browsers. I'm just not sure that 'transparent' has much value, though...

Similar Threads

  1. Select button on a web page
    By artty in forum Web
    Replies: 2
    Last Post: 07-20-2007, 03:58 PM
  2. Inter office Web Page
    By shers in forum Web
    Replies: 0
    Last Post: 04-09-2007, 08:45 AM
  3. Using Java 6SE to query a web service
    By (MC3)RaVeN in forum Java
    Replies: 0
    Last Post: 03-02-2007, 09:30 AM
  4. Updating Fields only in a web page!
    By Sanjay Patel in forum Architecture and Design
    Replies: 4
    Last Post: 02-22-2001, 12:33 PM
  5. Welcome to ASP+
    By Robert Scoble in forum ASP.NET
    Replies: 2
    Last Post: 07-20-2000, 02:35 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center