ライトボックスでHTML5ビデオタグが動作しない

ライトボックスにビデオを表示するためにhtml5ビデオタグを使用しています。ビデオ自体は正常に動作します。しかし、誰かがライトボックスを開いたときに自動再生しようとすると失敗します。ここに私が使用しているJavaScriptコードがあります。ライトボックスでHTML5ビデオタグが動作しない

正常に機能しているライトボックスをトリガーするHTML。

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

も正常に動作しているビデオタグのHTML。ライトボックスのクリックでビデオをautlplayingため

<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コード。期待どおりに動作しません。

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

私はまた、クリック後タイムアウトを使用して試してみましたが、それはを動作しませんでした。

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

出典

2017-10-27 shazyriver

これを数時間作業した後、分単位ですべてを行った代替品が見つかりました。私はHTML5ビデオプレーヤーを簡単に統合できる残照を使用しました。このシンプルなセットアップで、私はすべてセットされ、それは本当に良く見えました。

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

他人を助けて時間を節約する場合のために共有する。ハッピーコーディング。 :)

出典

2017-10-27 14:18:34 shazyriver

ライトボックスでHTML5ビデオタグが動作しない

答えて

関連する問題