2016-08-29 1 views
1

でビデオを一時停止した後、私はこのコードは私がビデオをクリックする前にHTML

<video id="primorvid" onclick="this.paused ? this.play() : this.pause();" poster="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Untitled-18.jpg" width="1903" height="564"> 
<source src="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Primor-V.4-HD.mp4" type="video/mp4" /> 
</video> 

映像作品を持っているポスターは、それがポスター画像を示しており、再生/一時停止を微

を作動していることが示され

ビデオを一時停止した後にポスターをもう一度表示したい場合は、ここからどのように進むのですか?

はどうもありがとうございまし デビッド

答えて

2

を追加します。これは、JSコード:

const vid = document.querySelector('#primorvid'); 
let currentTime = 0; 

vid.addEventListener('click', function(e) { 
    if (vid.paused) { 
     currentTime = vid.currentTime; 
     vid.load(); 
    } else { 
     vid.currentTime = currentTime; 
    } 
}); 

説明:

const vid = document.querySelector('#primorvid'); let currentTime = 0; 

ちょうどビデオを取得し、 vidに格納し、宣言 currentTimeビデオが一時停止された時刻を保存します。

私たちはビデオにclickイベントリスナーを追加します。これは、ポスターや一時停止を示し(動画の最後の状態は、(すなわち、それは今で一時停止している)遊んでいた場合は、現在の時間を節約し、

vid.addEventListener('click', function(e) { ... }); 

、それをリロードビデオ:

if (vid.paused) { 
    currentTime = vid.currentTime; 
    vid.load(); 
} else { 
    vid.currentTime = currentTime; 
} 

これ以外の場合は、現在の時刻を以前の時刻に設定してもう一度再生します。

ビデオを再びバッファリングすることを意味しない別の解決策は、ビデオが一時停止されたときに、イベントリスナーとともに、ポスターとオーバーレイ要素を設定して表示することです。

0

これを試すことができます。

var vrVid = document.getElementById("primorvid"); 
var pauseTime = vrVid.currentTime; 
vrVid.load(); 
vrVid.currentTime = pauseTime; 
vrVid.play(); 

私はあなたの問題を解決すると思いますが、ビデオをリロードしてバッファリングするので最適な解決策ではないと思います。

関連する問題