Question

简而言之，我正在努力弄清楚视频何时达到80％并且已播放80％的电影以防止人们快速转发。

我目前设法启动一个方法，一旦电影结束，播放量的总值等于或大于视频的持续时间。

var video = document.getElementById("video");

var timeStarted = -1;
var timePlayed = 0;
var duration = 0;
var checkpoint = 0;
var percentage = 0.8;
var percentComplete = 0;

// If video metadata is laoded get duration
if(video.readyState > 0)
  getDuration.call(video);
//If metadata not loaded, use event to get it
else
{
  video.addEventListener('loadedmetadata', getDuration);
}
// remember time user started the video
function videoStartedPlaying() {
  timeStarted = new Date().getTime()/1000;
}
function videoStoppedPlaying(event) {
  // Start time less then zero means stop event was fired vidout start event
  if(timeStarted>0) {
    var playedFor = new Date().getTime()/1000 - timeStarted;
    timeStarted = -1;
    // add the new ammount of seconds played
    timePlayed+=playedFor;
  }
  document.getElementById("played").innerHTML = Math.round(timePlayed)+"";
  // Count as complete only if end of video was reached
  if(timePlayed>=duration && event.type=="ended") {
    document.getElementById("status").className="complete";
  }
}

function videoIsPlaying(event) {
  if(timeStarted>0) {
    var playedFor = new Date().getTime()/1000 - timeStarted;
    timeStarted = -1;
    // add the new ammount of seconds played
    timePlayed+=playedFor;
  }
  
  checkpoint = playedFor / duration;
  percentComplete = video.currentTime / video.duration;
  
  console.log('timePlayed is '+timePlayed);
  console.log('percentComplete is '+percentComplete);
  console.log('checkpoint is '+checkpoint);
  console.log('duration is '+duration);
  console.log('playedFor is '+playedFor);
  
  if (percentComplete >= percentage && checkpoint >= percentage) {
   
  }
}

function getDuration() {
  duration = video.duration;
  document.getElementById("duration").appendChild(new Text(Math.round(duration)+""));
  console.log("Duration: ", duration);
}

video.addEventListener("play", videoStartedPlaying);
video.addEventListener("playing", videoStartedPlaying);

video.addEventListener("timeupdate", videoIsPlaying);

video.addEventListener("ended", videoStoppedPlaying);
video.addEventListener("pause", videoStoppedPlaying);

#status span.status {
  display: none;
  font-weight: bold;
}
span.status.complete {
  color: green;
}
span.status.incomplete {
  color: red;
}
#status.complete span.status.complete {
  display: inline;
}
#status.incomplete span.status.incomplete {
  display: inline;
}

<video width="400" height="300" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4"></source>
</video>

<div id="status" class="incomplete">
<span>Play status: </span>
<span class="status complete">COMPLETE</span>
<span class="status incomplete">INCOMPLETE</span>
<br />
</div>
<div>
<span id="played">0</span> seconds out of 
<span id="duration"></span> seconds. (only updates when the video pauses)
</div>
<br><br>

我希望任何提示和片段都朝着正确的方向发展！

Answer 1

创建Array和Set对象。在loadedmetadata事件设置值，即.8 .duration的{{1}}的度量值，其中Math.ceil(video.duration * percent)是小于percent的小数。使用1循环为for个实例填充Array到1的值，其中N为N .duration的百分之八十作为整数。在+1实例上调用.add()，Set作为Math.ceil(video.currentTime)事件的参数。在使用timeupdate的{{1}}事件迭代timeupdate，检查Array的{{1}} .every()元素的每个元素，包括Set，这将是.has()的百分之八十或更多;如果从Array通话功能返回Math.ceil(video.duration * percent)。

.duration

true

Answer 2

MDNs Cross-browser audio basics

timeupdate

每次currentTime属性都会触发timeupdate事件   变化。实际上，这每250毫秒发生一次。这个事件   可用于触发播放进度的显示。
aaa

如何在达到并观看了80％的视频时触发功能？

2 个答案:

timeupdate