HTML video controls unsichtbar stellen


Fonex47

Mitglied
Hey liebe Tutos, ich versuche die ganze zeit bei mir die videos so anzuzeigen das man keine play button volume button und alles was dazu gehört nicht sieht.
Habe es mit sehr vielen css tricks versucht, oder auch mit js.
möchte das man es anklicken kann zum abspielen und für pause nochmal anklicken, und das es auf dem Smartphone auch funktioniert.

Das ist mein Html

HTML:
<video controls controlsList="nodownload" playsinline><source src="$0#t=0.1"></video>
Wenn ich controls rausnehme kann ich kein play mehr machen.

Wäre für eine Lösung sehr dankbar.
Mfg
Fonex
 

Fonex47

Mitglied
Da ist wohl Handarbeit angesagt und Javascript schon der richtige Ansatz.
Hier wird beschrieben, wie es geht:
Würde problemlos auch ohne jQuery gehen.
Habe ich genau so gemacht wie beschrieben aber der Play button lässt sich nicht anklicken, weiß auch nicht warum..
 

Fonex47

Mitglied
Und das jQuery nach dem HTML notiert?
Ja, das habe ich auch gemacht.

Ich habe etwas gefunden, habe das onclick hier direkt auf dem video tag eingebaut nun spielt er immer nur ein video ab da ich mehrere videos liste via php und mysql.


PHP:
function boomPostFile($content) {
    global $data;
    if($content == ''){
        return '';
    }
    $content = $data['domain'] . $content;
    $source = $content;
    $regex = '\w/_\.\%\+#\-\?:\=\&\;\(\)';
    $content = preg_replace('@https?:\/\/([-\w\.]+[-\w])+(:\d+)?\/[' . $regex . ']+\.(png|jpg|jpeg)((\?\S+)?[^\.\s])[email protected]', '<div class="post_imagen"> <a href="$0" class="fancybox"><img src="$0"/></a> </div>', $content);
    $content = preg_replace('@https?:\/\/([-\w\.]+[-\w])+(:\d+)?\/[' . $regex . ']+\.(mp4|mov)((\?\S+)?[^\.\s])[email protected]', '<div class="post_imagen video-wrapper"> <video onclick="playPause()" autobuffer playsinline><source src="$0#t=0.1"></video></div>', $content);
    if(preg_last_error()) {
        $content = $source;
    }
    return $content;
}
 

Sempervivum

Erfahrenes Mitglied
Ich habe das erste Skript jetzt getestet und festgestellt, dass es fehlerhaft ist.
Wenn ich die Fehler korrigiere, funktioniert es. Sieht dann so aus:
Code:
        jQuery('video').parent().click(function () {
            if (jQuery(this).children("video").get(0).paused) {
                jQuery(this).children("video").get(0).play();
                jQuery(this).children(".playpause").fadeOut();
            } else {
                jQuery(this).children("video").get(0).pause();
                jQuery(this).children(".playpause").fadeIn();
            }
        });

        var vids = jQuery("video");
        jQuery.each(vids, function () {
            this.controls = false;
        });
("video" ohne Punkt davor)
 

Fonex47

Mitglied
Ich habe das erste Skript jetzt getestet und festgestellt, dass es fehlerhaft ist.
Wenn ich die Fehler korrigiere, funktioniert es. Sieht dann so aus:
Code:
        jQuery('video').parent().click(function () {
            if (jQuery(this).children("video").get(0).paused) {
                jQuery(this).children("video").get(0).play();
                jQuery(this).children(".playpause").fadeOut();
            } else {
                jQuery(this).children("video").get(0).pause();
                jQuery(this).children(".playpause").fadeIn();
            }
        });

        var vids = jQuery("video");
        jQuery.each(vids, function () {
            this.controls = false;
        });
("video" ohne Punkt davor)
Jetzt Blinkt der Play Button also macht ein opacity hin und her.
Die Konsole sagt: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). DOMException: The play() request was interrupted | Web
 

Sempervivum

Erfahrenes Mitglied
Hm, kann ich nicht reproduzieren, weder in Chrome noch Opera noch FF. Welchen Browser benutzt Du? Und welche Version von jQuery?
 

Sempervivum

Erfahrenes Mitglied
Funktioniert bei mir auch damit einwandfrei. Hast Du es online und kannst die URL posten? Wenn nicht, poste auch mal das HTML.
 

Neue Beiträge

Forum-Statistiken

Themen
272.351
Beiträge
1.558.596
Mitglieder
187.824
Neuestes Mitglied
Danke!