HTML5-Video-Tag funktioniert nicht im Leuchtkasten

Ich verwende HTML5-Video-Tag zur Anzeige von Video in einem Leuchtkasten. Das Video selbst funktioniert gut. Aber wenn ich versuche, es automatisch zu starten, wenn jemand den Leuchtkasten öffnet, scheitere ich. Hier ist der JavaScript-Code, den ich benutze.HTML5-Video-Tag funktioniert nicht im Leuchtkasten

HTML Leuchtkasten auslösen, die feine Arbeit ist.

<a href="#" class="btn btn-blue lightbox btnlb">Watch the full video</a>

HTML-Video-Tag, das auch in Ordnung arbeitet.

<video id="lbvideo" width="960" height="540"> 
    <source src="<?php bloginfo('template_directory'); ?>/videos/pinkgirl.mp4" type="video/mp4"> 
    <source src="<?php bloginfo('template_directory'); ?>/videos/pinkgirl.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video>

Javascript-Code Video-on-Klick Leuchtkasten für autlplaying. Funktioniert nicht wie erwartet.

$(".btnlb").click(function(e){ 
     var myVideo = document.getElementById("lbvideo"); 
     myVideo.play(); 
});

Ich habe auch versucht Timeout nach Klick verwenden, aber nicht funktionierte.

$(".btnlb").click(function(e){ 
     setTimeout(function() { 
     var myVideo = document.getElementById("lbvideo"); 
     myVideo.play(); 
     console.log(myVideo); 
     }, 5000); 
});

Quelle

2017-10-27 shazyriver

Nachdem ich einige Stunden daran gearbeitet habe, fand ich eine Alternative, die alles in wenigen Minuten erledigt hat. Ich habe nachglühen, das ist ein super einfach zu HTML5 Video-Player zu integrieren. Mit diesem einfachen Setup war ich fertig und es sah wirklich gut aus.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>afterglow player</title> 
    <script src="//cdn.jsdelivr.net/npm/[email protected]"></script> 
    </head> 
    <body> 
    <a class="afterglow" href="#myvideo">Launch lightbox</a> 
    <video id="myvideo" width="960" height="540"> 
     <source type="video/mp4" src="/path/to/myvideo.mp4" /> 
    </video> 
    </body> 
<html>

Teilen, falls es jemand anderen hilft und spart ihnen etwas Zeit. Glückliche Kodierung. :)

Quelle

2017-10-27 14:18:34 shazyriver

HTML5-Video-Tag funktioniert nicht im Leuchtkasten

Antwort

Verwandte Themen