HTML5ビデオ再生ボタンオーバーレイの問題

ビデオプレーヤーを作成していますが、自分のビデオを再生する方法を私のplayButtonオーバーレイをクリックして見つけることができません。究極の目標は、ボタンをクリックしてボタンをクリックして再生することです。ビデオをクリックして一時停止して再生ボタンが再表示されたときに消えますが、私が立っている場所では、クリックすると動画が再生されませんオーバーレイ再生ボタン。HTML5ビデオ再生ボタンオーバーレイの問題

<div class="wrapper"> 
<video class="video" id="video" loop controls onclick="playPause()"> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
</video> 
<div class="playButton" onclick="playPause()"></div> 
</div>

スクリプト

var bunnyVideo = document.getElementById("video"); 
function playPause() { 
if (bunnyVideo.paused) 
{   
     bunnyVideo.play(); 
} 
    else 
    { 
     bunnyVideo.pause(); 
    } 

}

https://jsfiddle.net/sbtL5bag/

出典

2017-03-16 GiBiT 09

あなたのJavaScript ロードタイプNo wrap - in <body>を変更する場合、それは動作します。

JSFiddle

出典

2017-03-16 19:49:32

すごくおかげで、その再生ボタンをどのように切り替えることができますか？ –

もそれはラップでタグでは、jsfiddleものだけですか？それとも私は特に私のウェブサイト上で何かをしなければならないのですか？ –

@ GiBiT09このオプションは、JavaScriptがページに入力される場所を指定します。 onLoadオプションは、 'onclick'要素と別のスコープで' playPause'関数が参照された後に*ページが読み込まれた後に読み込まれます。また、頭の中でコードを歪ませることもできますが、 'bunnyVideo'初期化を関数内に置く必要があります。要素' video'は頭部の読み込み時に利用できないからです。 –

HTML5ビデオ再生ボタンオーバーレイの問題

答えて

関連する問題