如何在达到并观看了80％的视频时触发功能？ [英] How to trigger a function when 80% of the video has been reached and has been watched?

问题描述

简而言之，我很难弄清楚视频何时达到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; //如果视频元数据是lached，则获取durationif（video.readyState> 0）getDuration.call（video）; //如果未加载元数据，请使用event来获取itelse {video。 addEventListener（'loadedmetadata'，getDuration）;} //记得用户启动视频功能时的时间videoStartedPlaying（）{timeStarted = new Date（）。ge tTime（）/ 1000;} function videoStoppedPlaying（event）{//开始时间小于零表示停止事件被触发vidout start event if（timeStarted> 0）{var playsFor = new Date（）。getTime（）/ 1000  -  timeStarted ; timeStarted = -1; //添加新播放的秒数timePlayed + = playsFor; } document.getElementById（playing）。innerHTML = Math.round（timePlayed）+; //如果（timePlayed> = duration&& event.type ==ends）{document.getElementById（status）{className =complete;则仅在达到视频结束时计为完成。函数videoIsPlaying（event）{if（timeStarted> 0）{var playsFor = new Date（）。getTime（）/ 1000  -  timeStarted; timeStarted = -1; //添加新播放的秒数timePlayed + = playsFor; } checkpoint = playingFor / duration; percentComplete = video.currentTime / video.duration; console.log（'timePlayed是'+ timePlayed）; console.log（'percentComplete是'+ percentComplete）; console.log（'checkpoint is'+ checkpoint）; console.log（'持续时间是'+持续时间）; console.log（'playingFor is'+ playingFor）; 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（ 结束，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 =400height =300controls =trueposter =id =video> < source type =video / mp4src =http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4>< / source>< / video>< div id =statusclass =incomplete>< span>播放状态：< / span>< span class =status complete> COMPLETE< / span>< span class =status incomplete> ; INCOMPLETE< / span>< br />< / div>< div>< span id =playing> 0< / span>秒退出< span id =duration>< / span>秒。 （仅在视频暂停时更新）< / div>< br>< br>  

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

解决方案

创建一个 Array 和一个 Set 对象。 loadedmetadata 事件设定值，其为 .8 的 .duration Math.ceil（video.duration * percent），其中％是小于<$ c的小数$ C> 1 。使用 for 循环来填充 Array 实例，其值为 1 到 N ，其中 N 是的百分之八十。.duration +1 为整数。在上设置实例，使用 Math.ceil（video.currentTime）<调用 .add（） / code>作为 timeupdate 事件的参数。在 timeupdate 事件迭代数组使用 .every（）到检查的每个元素是否 .has（）元素数组，包括 Math.ceil（video.duration * percent），这将是 .duration ;如果从 .every（）调用函数返回 true 。

< pre class =snippet-code-js lang-js prettyprint-override> const video = document.getElementById（video）; const res = new Set（）; const arr = Array（）; const percent = .8; let toWatch = 0; function mediaWatched（curr）{alert（`$ {curr}％of media watched`）} function handleMetadata（e）{toWatch = Math.ceil（video.duration * percent）; for（let i = 1; i< = toWatch + 1; i ++）{arr.push（i）; function handleTimeupdate（e）{res.add（Math.ceil（video.currentTime））; if（arr.every（function（n）{return res.has（n）}））{console.log（video.currentTime，video.duration）; video.removeEventListener（timeupdate，handleTimeupdate）; mediaWatched（Math.ceil（（video.currentTime / video.duration）* 100））; video.addEventListener（loadedmetadata，handleMetadata）; video.addEventListener（timeupdate，handleTimeupdate）;

 < video width =400height =300controls =trueposter =id =video> < source type =video / mp4src =http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4/>< / video>  

In short, I am struggling to figure out when the video reaches 80% AND 80% of the movie has been played in order to prevent people from fast forwarding.

I currently manage to fire a method, once the movie ends and the total value of the amount played is equal to or larger than the duration of the video.

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>

I would appreciate any hints and snippets into the right direction!

解决方案

Create an Array and a Set object. At loadedmetadata event set value which is measurement of .8 of .duration Math.ceil(video.duration * percent), where percent is a decimal less than 1. Use for loop to fill Array instance with values from 1 to N, where N is eighty-percent of .duration +1 as an integer. Call .add() on Set instance with Math.ceil(video.currentTime) as parameter at timeupdate event. At timeupdate event iterate Array using .every() to check if each element of Set .has() element of Array, including Math.ceil(video.duration * percent), which will be eighty-percent or greater of .duration; if true is returned from .every() call function.

const video = document.getElementById("video");
const res = new Set();
const arr = Array();
const percent = .8;
let toWatch = 0;

function mediaWatched (curr) {
  alert(`${curr}% of media watched`)
}

function handleMetadata(e) {
  toWatch = Math.ceil(video.duration * percent);
  for (let i = 1; i <= toWatch + 1; i++) {
    arr.push(i);
  }
}

function handleTimeupdate (e) {
  res.add(Math.ceil(video.currentTime));
  if (arr.every(function(n) {return res.has(n)})) {
    console.log(video.currentTime, video.duration);
    video.removeEventListener("timeupdate", handleTimeupdate);
    mediaWatched(Math.ceil((video.currentTime / video.duration) * 100));
  }
}

video.addEventListener("loadedmetadata", handleMetadata);

video.addEventListener("timeupdate", handleTimeupdate);

<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" />
</video>

这篇关于如何在达到并观看了80％的视频时触发功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！