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
 
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.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
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])?@i', '<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])?@i', '<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;
}
 
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)
 
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
 
Hm, kann ich nicht reproduzieren, weder in Chrome noch Opera noch FF. Welchen Browser benutzt Du? Und welche Version von jQuery?
 
Zurück