Ankündigung

Einklappen
Keine Ankündigung bisher.

Quicktime Movie "Custom Controls" wie Apple ?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Quicktime Movie "Custom Controls" wie Apple ?

    Hallo,
    Ich habe eine Frage zum Thema Quicktime. Wie haben die Applemacher das gemacht:
    Apple - So funktioniert's - Fotos

    Ich meine Das eingebettete .mov file wird von wie ich vermute js und css basierenden Controls also die Steuerelemente (Play, pause....) angesteuert.
    Ich habe es nun mit scriptaculous für den Slider versucht aber es fehlt mir noch die Funktion, das der Slider sich automatisch aktualisiert wenn man auf play drückt. Aber mit meiner rekursiven funktion hängen sich alle Browser auf. hier mal mein script:

    PHP-Code:

    <html>
    <
    head>
    <
    script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/interface.js"></script>
    <script src="lib/prototype.js" type="text/javascript"></script>
      <script src="js/scriptaculous.js" type="text/javascript"></script>
      <script src="js/unittest.js" type="text/javascript"></script>
    </head>

    <body>
    <style type="text/css">
      div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
      div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }

      div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }
    </style>

    <div id="track1" style="width:200px;background-color:#aaa;height:5px;">
        <div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
      </div>
      
        <a href="#" onclick="slider6.setValueBy(-1000);return false;">&lt;--</a>
      <a href="#" onclick="slider6.setValueBy(1000);return false;">--&gt;</a>
      <a href="javascript:refreshslider();">Refresh slider</a>
    <a href="javascript:playv();">Play</a>
    <a href="javascript:stopv();">Stop</a>
    <a href="javascript:document.musik.Rewind();">Rewind</a>
    <a href="javascript:document.musik.SetTime(80000)">Skip</a>
    <a href="javascript:alert(document.musik.GetTime());">Gettime</a>


    <script type="text/javascript">
       
    var state = 0;
       
       function stopv() {
       if(state==0){
       document.musik.Stop();
       }
       };
       
       function playv() {
       if(state==0){
       document.musik.Play();
       }
       };
       
    function refreshslider() {
       slider6.setValue(document.musik.GetTime());
       setTimeout(refreshslider(),20000);
       };
       
    </script>

    <script type="text/javascript">
       // <![CDATA[
       var slider6 =  new Control.Slider('handle1','track1',{
          sliderValue:0,
          range:$R(0,174815),
          onSlide:function(v){
          document.musik.SetTime(v);
          },
          onChange:function(v){
          document.musik.SetTime(v);
          }});
           // ]]>
    </script>

    <OBJECT
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
    width="960" height="528"
    id="musik">
    <PARAM name="src" value="lb.mov">
    <EMBED HEIGHT="528" WIDTH="960"
    SRC="lb.mov"
    TYPE="video/quicktime"
    PLUGINSPAGE="www.apple.com/quicktime/download"
    EnableJavaScript="true" /
    NAME="musik"
    />
    </OBJECT>

    </html></body> 
    Hat jemand eine bessere Idee oder kann mir bei der umsetzung helfen. Ausserdem habe ich das Problem, dass ich mit css kein div container über den Quicktimefilm legen kann. Weiß jemand wie ich das machen kann, das das genauso wie bei Apple aussieht ?

  • #2
    neimand ne idee ? Ist wieder aktuell geworden

    Kommentar

    Lädt...
    X