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;"><--</a>
<a href="#" onclick="slider6.setValueBy(1000);return false;">--></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 ?
11.06.2010, 20:39
Quicktime Movie "Custom Controls" wie Apple ? 
