[Erledigt] Design Perpetuum: Video Start/Stop, Ton an/aus schalten

Ich (und bestimmt auch andere) habe ein Problem mit dem Video, dass man diese nach dem Start leider nicht mehr stoppen kann und auch den Ton nicht an- oder ausschalten kann.

Bei Firefox und Internet Explorer hat man noch die Möglichkeit über Klick in das Video mit der rechten Maustaste das Video anzuhalten oder zu starten und auch den Ton an- oder auszuschalten. Bei Google Chrome und auch auf Tablets oder Handys hat man diese Möglichkeit leider nicht. Wobei auch nicht jeder Webbesucher auf die Idee kommt, mit der rechten Maustaste im Video das Video oder Ton an- oder auszuschalten. Optimal wären hier je ein Button zum Video und Ton an- oder auszustellen.

Hier nun meine Anfragen an die Forum-User:

Kann man so was auch noch nachträglich z.B. als kleine Buttons für Video Start/ Stop und für Ton an/aus auf das Video legen sowie den Menü-Button ganz nach oben?

Hier ist meine TestSeite: http://www.aeromovie.de/TestPage/

Gruss

Hübi

Hallo Hübi

Du kannst das Video z.B. um das Attribut "controls" erweitern, dann erhältst Du die Video-Kontrollleiste mit den Steuerelementen.

Siehe hier: http://www.w3schools.com/tags/att_video_controls.asp

Beachte aber, dass jeder Browser seine eigene Video-Kontrollleiste hat, die unterschiedlich aussehen.

Oder falls Du aber wirklich nur Start/Stop und Sound/Mute haben willst und es dann auch noch einheitlich aussehen soll, dann ist dies z.B. hiermit auch möglich:

http://www.jqueryrain.com/?Yh4zUF2z

Hallo Walti,

erst mal Danke für Deine vorschläge.

Ich wäre für Start/Stop und Sound/Mute funktion.

Leider weiss ich nicht wie und wo das  eingebunden werden muss. Damit das auch über dem Video liegt. Ich bin leider kein  Programmierer.

Wäre Super wenn einer von den Profi  Programmierer hier im Forum das für einen HTML Dummy aufzeigen könnte wie man so was in das Design Perpetuum einbinden könnte.

Gruss

Hübi

Tja, Hübi...

...dies ist ein Kaufdesign, das ich nicht habe.

Die ganzen "Infinity-Designs" unterscheiden sich ja praktisch fast ausschliesslich durch den Eyecatcher und die Navigation, manchmal auch noch geringfügig im Footer. Der Content ist praktisch überall gleich und es gibt auch ansonsten eigentlich keine Highlights.

Man nehme also einen anderen Eyecatcher und eine neue Navigation und gebe dem ganzen noch einen neuen Namen und schon ist wieder ein neues Produkt für den Verkauf geboren... 

Für Leute, die grössere Anpassungen selbst vornehmen oder gar eigene Designs schreiben können, gibt es also eigentlich keinen (vernünftigen) Grund, dass sie sich ein Infinity-Design zulegen.

Deshalb ist's mit der zur Verfügungstellung von "copy/paste-Code", Zeilenangaben, oder auch ganzen Umbauanleitungen (wie für die zweite Lösung) problematisch und leider nicht gut bestellt, sorry...

Für meine gepostete erste Lösung kann ich Dir zumindest ansatzweise (mit Vermutungen) weiter helfen.

Höchstwahrscheinlich in der navigation.ccml wirst Du diese Passage finden, wobei bei Poster natürlich etwas anderes stehen wird, wahrscheinlich nämlich eine erweiterte Eigenschaft:

1

<video class="perpetuumcontainerchild" loop autoplay="autoplay" poster="./images/videoposter01_poster.jpg"  data-width="1920" data-height="1080">

Die erweitertst Du wie im gelinkten Beispiel um das Attribut "controls", also so:

1

<video class="perpetuumcontainerchild" loop autoplay="autoplay" poster="./images/videoposter01_poster.jpg"  data-width="1920" data-height="1080" controls>

Und das sollte es auch schon gewesen sein...

Die zweite Lösung ist da schon ein wenig komplizierter und benötigt die Integration von Elementen, die (oder deren genaue Bezeichnung) man aus dem Quellcode Deiner Testseite nicht herauslesen kann (erweiterte Eigenschaften).

Aus diesem Grund kann ich Dir für die zweite Lösung nicht zu einer Umbauanleitung verhelfen, aber wer weiss...

...vielleicht findet sich noch ein Nutzer, der dieses Design hat und Dir weiter helfen kann...

Hallo Walti,

Du kein Problem. Man kann ja nicht alles haben. Finde aber gut das Du trotzdem hilfst.  

ich Probier mal Deinen Tipp aus.

Mal schauen, der Sven aus Berlin hat auch das Design und hat uns schon sehr bei dem Footer geholfen das hinzubekommen. Vielleicht schaut er ja auch mal hier vorbei und hat lust was dazu zusagen 

Gruss

Hübi

Hi allerseits,

... das mit controls funktioniert. Hatte ich schon getestet, ABER durch die CSS Anweisung des Designs (overflow) werden diese verdeckt. Eine Sache habe ich bereits als e.E. eingebaut -->. die Option der Endlosschleife-Einstellungen. Der Rest werde ich dann via JavasCript ergänzen - zumal es eine gut dokumentierte API im Netz für genau solche Situationen gibt ...

1.) in der config.ccml:

<cc:property id="design.start.loop.video" caption="Endlosschleife für Video einschalten" folder="Design" targettype="site" type="boolean" default="0">

 2.) in der navigation.ccml ca. Zeile 203 ...

von

...
...
<video class="perpetuumcontainerchild" loop autoplay="autoplay" <cc:if cond="&pic.poster_poster.url">poster="<cc:printpictureurl obj="pic.poster" suffix="_poster" />"</cc:if> <cc:if cond="&site.properties.design.mutevideo">muted="muted" </cc:if> data-width="1920" data-height="1080">
...
...

 
in ändern

...
...
<video class="perpetuumcontainerchild" <cc:if cond="&site.properties.design.start.loop.video">loop </cc:if>autoplay="autoplay" <cc:if cond="&pic.poster_poster.url">poster="<cc:printpictureurl obj="pic.poster" suffix="_poster" />"</cc:if> <cc:if cond="&site.properties.design.mutevideo">muted="muted" </cc:if> data-width="1920" data-height="1080">
...
....

Damit lässt sich dann die Endlosschleife der Wiederholungen unterbinden - wenn gewünscht.

Bis die Tage

Hallo Harlekin8,

Die Endlosschleife finde ich nicht so störend. Aber Danke für Deinen Tipp.

Eine Lösung für Start/Stop und Sound/Mute funktion für das Video scheint dann ja wohl nicht so einfach zu sein?

Dannk kann am also nur darauf warten das siquando das mal nachträglich einbaut?

Ich hatte deswegen auch schon Kontakt mit dem Siquando Support. Ob und wann da was kommt ist aber fraglich.

MfG 

Hübi

"Eine Lösung für Start/Stop und Sound/Mute funktion für das Video scheint dann ja wohl nicht so einfach zu sein"

.... doch, eigentlich schon. Werde es am WE nachrüsten, wenn es zeitlich passt. Ich warte nicht bis Siquando sich da rührt ...

Im übrigen schönes "Showreel".

Bis dann

Hallo Harlekin8,

wenn Du das mal fertig haben solltest, wäre es Super wenn Du es dann hier zeigen könntest wie das geht.

Danke für die Blumen  (ShowReel) Ist aber noch ein altes DemoReel neues ist in Arbeit. 

Ich warte dann mal gespannt auch Deine Eingebung

MfG

Hübi

Hallo Hübi

Zuallererst muss ich mal Deine "wahrscheinlichen Illusionen" leider zerstören, denn man kann nicht nur Dein Video (auch ohne zusätzliches Programm mit wenigen Klicks, gemäss Deinem Beitrag hier) "klauen", sondern auch Dein ganzes Design und sogar Deine gesamte Website...

Alles, was man je veröffentlicht hat, kann auch "geklaut" werden!

Und falls also "Klauen" Deine ganz grosse Befürchtung sein solte, dann solltest Du Dir gut überlegen, OB Du überhaupt etwas veröffentlichen willst, und falls ja WAS Du dann veröffentlichen willst...!

Somit habe ich mal "als Beispiel" (da ich Dein Design ja wie schon geschrieben nicht habe) einfach mal Deine ganze Website (nicht "geklaut" sondern nur) "geborgt" und Deine Startseite etwas abgeändert, um Dir folgendes Beispiel zu machen, so wie Du Dir dies ungefähr vorgestellt haben könntest:

http://videocontrols.webchaot.ch/

Dies keineswegs im "Bösen", sondern im "Guten" (und ich hoffe, dass Du mich dafür auch nicht "verklagst"), da ich Dir damit auch einen "Lösungsansatz" für Deinen Wunsch bieten kann... 

Und so kommst Du zu dieser "Beispiellösung"....

Dazu brauchst Du meine zwei Dateien, die Du bitte in Deinen Designordner (also in Deinem Fall nach "Perpetuum") kopierst und hier downloaden kannst:

http://videocontrols.webchaot.ch/assets/videocontrolsdownload.zip

Dann fügst Du in der global.ccml folgenden Code hinzu:

1
2

<cc:asset src="style_wsvideocontrols.css" dst="wsvc.css" obj="mywsvc">
<cc:asset src="wsvideocontrols.js" dst="wsvc.js" obj="wsvc" noparse="1">

Und dann fügst Du in der navigation.ccml zwischen <head> und </head> folgenden Code hinzu:

1
2

<link rel="stylesheet" type="text/css" href="<cc:print value="&mywsvc.url">" />
<script type="text/javascript" src="<cc:print value="&wsvc.url">"></script>

Danach suchst Du in der navigation.ccml nach dieser Code-Passage:

1
2

 
<video class="perpetuumcontainerchild" loop autoplay="autoplay" poster="xxxxx"  data-width="1920" data-height="1080">

 ...wobei "xxxxx" für eine erweiterte Eigenschaft steht...

Ersetze diese Code-Passage durch diese (und füge somit id="myvideo" hinzu):

1
2

 
<video id="myvideo" class="perpetuumcontainerchild" loop autoplay="autoplay" poster="xxxxxx"  data-width="1920" data-height="1080">

 ...wobei natürlich "xxxxx" wieder für diese erweiterte Eigenschaft steht, die Du aus dem Originaldesign übernehmen musst...

Schlussendlich füge in der navigation.ccml nach dem schliessenden </video> noch folgenden Code hinzu:

1
2
3
4

                <div id="video-controls">
                        <button type="button" id="play-pause" class="play">Pause</button>
                        <button type="button" id="mute">Ton aus</button>
                </div>

So...

...das war's dann auch schon... 

Falls Dir die nun erscheinenden Buttons rechts oben deplatziert erscheinen oder in der Gestaltung nicht zusagen sollten, so kannst Du sie nach Deinen eigenen Wünschen durch Änderungen in der Datei "style_wsvideocontrols.css" platzieren bzw. formatieren.

P.S,

Selbstverständlich könnte ich falls erforderlich die js-Datei noch auf alle anderen, also sämtliche "controls-Attribute" erweitern (also auch auf die Spieldauer, Lautstärke und Ganzbild [was in diesem speziellen Fall ja nicht erforderlich ist] erweitern...

Viel Erfolg!

Hallo Walti,

ja ist mir schon klar das man alles klauen kann was auch Online steht. Und für jemanden wie Dich der auch diese Programmiere Kenntnis hat ist es natürlich noch einfacher. Nur muss man es je nicht jeden so einfach machen, dass man über einem Menüpunkt  das Video abspeichern kann. So kann sich jeder ohne Kenntnisse das Video downloaden. Ich sehe leider keinen Sinn in diesem Menüpunkt warum so was zum Downloaden angeboten wird. Aber egal wir wollen nicht vom Thema abschweifen. 

Ich danke Dir für Deine Hilfe und Umsetzung des Problems.  Ich werde es morgen gleich mal ausprobieren und Rückmeldung geben.

PS: Wäre nett wenn Du den Inhalt von Deiner Page wieder löschen könntest. 

Gruss

Hübi

Hallo Hübi,

ich habe bereits zweimal versucht, Dir mitzuteilen, daß dies fester Bestandteil der HTML5-basierten Wiedergabe des Videos via <video>-Tag ist. Das ist da so, genau wie auch im <audio>-Tag. Scrolle auf der Startseite unseres Forums mal herunter zum "Track der Woche" und mache einen Rechtsklick darauf und Du siehst, daß man auch diesen Audio-Track ganz einfach herunterladen kann.

Wer das nicht will, darf die HTML5-Tags <audio> und <video> nicht nutzen, sondern muß sich anderer Programmiertechniken bedienen. Nur darf man sich dann auch nicht wundern, daß solche Lösungen nicht auf allen modernen Anzeigegeräten funktionieren.

Hübi,

Es gibt ein paar Tricks, mit welchen man das Herunterladen erschweren kann. Entweder versucht man es mit JavaScript oder man legt einfach eine transparente Grafik ueber das Video.

Problem beim letzteren: Du musst dich schon recht gut mit CSS auskennen, damit dein transparentes Bild auch genau ueber dem Video liegt und du nicht die Play / Paus / Stop und Volume Controls abdeckst. Beide Loesungen kann man trotzdem mit ein paar Mausklicks umgehen.

Wie auch immer, du machst dir da einfach zu viel Muehe! Leute, die dein Video klauen wollen, finden sowieso einen Weg. Schlimmstenfalls schaut der Besucher einfach in Chrome under Resources und hat das Video dann auch.

Fals es hilft, deaktiviere einfach des Context-Menue fuer den Video-Player mit JavaScript:

1
2
3

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

@Tumultus

...ein Blick in den Quellcode genügt um egal was zu "klauen", aber das brauche ich Dir ja wohl nicht zu sagen...

@Hübi

"Löschen" ist hier im Forum nicht angesagt ( siehe Forenregeln, § 2. Beiträge, (9) ), denn sonst ist der Beitrag für andere User ja nicht mehr nachvollziehbar!

Aber ich habe immerhin alles "anonymisiert", d.h. weder im Inhalt der Beispielseite noch in deren Quellcode noch in der Adresse des Besipiellinks (in meinem Beitrag #10 geändert) weist irgend etwas auf Dich hin.

Ich hoffe damit Deinem Anliegen entsprochen zu haben und Du erfreust Dich trotzdem an meinem Lösungsansatz...

@Walti:

Ja, hab ich doch gesagt, dass man mit ein paar Mausklicks so ziemlich alle "Erschwernisse" umgehen kann. Wollte nur nicht speziell auf moegliche Wege hinweisen, denn damit gibst du anderen Leuten nur Ideen ... 

@Siquando

Ich brauche Euch ja nicht wirklich zu sagen, dass man diese Funktion über "erweiterte Eigenschaft" ganz einfach ein- oder ausblenden könnte...

@ Volker

Ich habe das schon verstanden, das das vorgeben ist.

Ich finde diese Funktion nur nicht sinnvoll, mehr wollte ich damit nicht aussagen.

@Walti

Du solltest es ja auch nicht aus dem Forum löschen, sondern nur so wie Du es jetzt ja auch gemacht hast. Deswegen habe ich ja auch von Deiner Page geschrieben und nicht Forum. Also alles gut

Ich habe jetzt alles so bei mir eingetragen wie Du es geschrieben hast, hat alles Super geklappt. Vielen Dank noch mal für die Hilfe. Jetzt  habe ich das Design mit Footer und Video Start/ Stop und Ton  aus/an dank den tollen  Usern hier im Forum.

Hier das Ergebnis : http://www.aeromovie.de/TestPage/

Beim Google Chrome, FireFox und Internet Explorer funktioniert es sehr gut.

Bei Tabletts (iOS) oder Handys (iOS)  geht leider nur der Video Start/Stop Button

Bei Tabletts (Android) oder Handys (Android) gehen beide Button.

Ich hätte die beiden Button gerne an einer anderen Position. Nur wenn ich die Position verändere werden die beiden Button in  FireFox, Tabletts (Android u. iOS) oder Handys (Android u. iOS)  leider gar nicht mehr angezeigt? Wie kommt das?

Gruss

Hübi

Wie hast Du denn den Code zur Positionierung verändert? Und wo willst Du die Dinger denn hin haben?

Den Z-index in der style_wsvideocontrols.css unter #video-controls verringern. Ist im Beispiel von walti auf 1000 eingetragen.

Beisst sich mit der Navigation. Ich hab 700 genommen und so funktioniert auch die Navigation bei mir.

Allerdings jetzt nur auf dem PC getestet!

@ Walti

Ich wollte die beiden Button oben neben dem Hauptmenü stellen. 

Hier der Code:

#video-controls {

        position: relative;
        top: 25px;
        right: 1700px;
        text-align: right;
        z-index: 500;
}
 
#video-controls {
        opacity: 1.0;
}
 
button {
        background: rgba(0,0,0,.0);
        border: 3;
        color: #ffffff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
}
 
button:hover {
        cursor: pointer;
}
 
#seek-bar {
        width: 360px;
}
 
#volume-bar {
        width: 60px;
}

@ Sven

ich hatte das schon mit 500 ausprobiert, hat nur mit Google Chrome und Internet Explorer funktioniert.

Kann es auch noch mal mit 700 Testen.

Gruss Hübi

... ändere mal bei #videocontrols die Angabe position:relative in absolute ... Dann mit den Positionswerten neu platzieren ...

Bye !

Hallo Harlekin8,

ich habe position:relative auf absolute geändert.   

Jetzt geht es auch bei FireFox.  

Bei Tabletts (iOS + Android) oder Handys (iOS + Android) geht es leider nicht, die beiden Button werden nicht angezeigt an der neuen Postition.

Hier das Ergebnis : http://www.aeromovie.de/TestPage/

gruss

Hübi

Also ich hab es mal so geändert in der style_wsvidecontrols.css :

#video-controls {
        position: relative;
        top: 25px;
        left: 80px;
        text-align: left;
        z-index: 700;
}

 Bei mir wird des links neben den Menu-Button angezeigt. Auch bei Skalierung. Musst du mal schauen ob es so bei dir mit Handy und Tablett funktioniert! Wie gesagt, hab kein Tablett.

Hallo Sven,

ich habe das mal von Dir so übernommen.

Ergbnis:

Beim Google Chrome, FireFox und Internet Explorer funktioniert es.

Bei Tabletts (Android) oder Handys (Android) gehen beide Button (Hurra).

Bei Tabletts (iOS) oder Handys (iOS)  (einen iMac habe ich nicht zum Testen) geht leider nur der Video Start/Stop Button. Ton an /Ton aus zeigt an das man an klicken kann, hat aber keine Auswirkungen auf den Ton. Na man kann halt nicht alles haben.

Hier das Ergebnis : http://www.aeromovie.de/TestPage/

Danke für Deinen Tipp

Gruss 

Hübi

Jo auf Handy geht (android). Bin gerade drauf! Supper, freut micht.

Ja finde ich immer wieder klassen das einem hier so geholfen wird 

Zwei fragen hätte ich noch.

Der Ton von den Videos ist immer auf 100% kann man das anpassen (ausser im Videoschnitt selbst) auf z.B. 50% Lautstärke?

@Tumultus

Fals es hilft, deaktiviere einfach des Context-Menue fuer den Video-Player mit JavaScript:

$(document).ready(function(){

   $('#videoElementID').bind('contextmenu',function() { return false; });
});

Wo genau muss der Code stehen?

Gruss

Hübi

Eine Forumspende trägt selbstverständlich daran bei dass die Helfer das auch im Zukunft weiter tun können

Du kannst den Code im <head> Bereich einbinden, um aber Ladezeiten der Seite zu beschleunigen, ist es besser, den folgenden Code als HTML Absatz am Ende der Seite einzufuegen. Falls deine Seite schon JQUERY eingebunden hat, kannst du die erste Zeile weglassen:

1
2
3
4
5
6
7
8

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("video").bind("contextmenu",function(){
		return false;
	});
});
</script>

Fuer Testzwecke, hier eine komplette Seite. Den Code einfach in ein leeres Document einfuegen, als HTML speichern und auf den Server laden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<body> 
 
<video width="400" controls="">
	<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
	Your browser does not support HTML5 video.
</video>
<p>
	Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("video").bind("contextmenu",function(){
		return false;
	});
});
</script>
 
</body>
</html>

Wie schon vorher daruf hingewiesen wurde, man kann auch diese Sperre sehr leicht umgehen.

Ja, klar...

gehe in die Datei wsvideocontrols.js und füge unmittelbar nach

1

var video = document.getElementById("myvideo");

noch dies hinzu:

1

video.volume = 0.5;

 Für 50% wählst Du den Wert 0.5, für 40% wählst Du 0.4 etc. etc.

Also neu dann so:

1
2

        var video = document.getElementById("myvideo");
        video.volume = 0.5;

Beispiel "laut"                       Beispiel "leiser"

@Walti

Danke habe ich bei mir jetzt mit eingebunden.

@Tumultus

Auch Dank an Dir.  Habe es aber nicht hinbekommen. Hat bei mir keine Auswirkung. Egal ist nicht ganz so wichtig.

@Marjorie

ja, haben ich gerne gemacht. Finde die Art des Aufrufens nur nicht so super gut.  Eine Spende ist ja immer noch freiwillig.  Und so bringst Du einen schon in Bedrängnis. Ich hätte es sowieso mal gemacht.

Und auch Dank an alle anderen die Geholfen haben, das Ziel zu verwirklichen.

MfG

Hübi