HTML Doctype 导致视频在没有滚动到的情况下自动播放

Question

基本上，我想在向下滚动到视频时自动播放 HTML5 视频。通过引用this code，我得到了我想要的结果。

我的问题是，当我使用 <!DOCTYPE html> 声明时，视频会自动播放而不会滚动。我需要使用 <html> 来解决它。

但是当我删除 <!DOCTYPE html> 时，我的其他代码会受到影响。所以我不得不使用 <!DOCTYPE html> :(

任何人都可以提出解决此问题的方法吗？向下滚动时使用 <!DOCTYPE html> 不影响自动播放视频。抱歉我的英语不好。

function inViewPort (elem) {
  //First get the scroll y position (how far the user scrolled down)
  var scrollY = document.body.scrollTop;
  //Now get the height of the viewport
  var screenH=document.body.clientHeight;
  //Also get the y position of the element
  var yPos=elem.offsetTop;
  //And now calculate the maximal y position for elem when it is still visible
  var maxY=scrollY+screenH;

  if (yPos>scrollY && yPos<maxY) {
    //It is in the users viewport
    return true;
  } else {
    //It isn't in the users viewport
    return false;
  }
}

function checkStart (videoName) {
  var elem = document.getElementById(videoName);
  if (inViewPort(elem)) {
    elem.load();
    elem.play();
  } else if (!elem.ended) {
    setTimeout("checkStart('"+videoName+"');", 100);
  }
}

<body onLoad="checkStart('vid');">
    <div style="witdh: 100%; height: 1000px; background: #aaaaaa;">
      <h1>Scroll down to start the video</h1>
    </div>
    </p>
 
    <video src="http://www.w3schools.com/tags/movie.mp4" id="vid" width="500px" controls>
      Your browser doesn't support this video. Please upgrade your browser.
    </video>
</body>

Answer 1

只是扩展条件：

 if (yPos > scrollY && yPos < maxY && scrollY !=0 )

这将在用户滚动到特定视频位置时起作用

function inViewPort (elem) {
  //First get the scroll y position (how far the user scrolled down)
  var scrollY = document.body.scrollTop;
  //Now get the height of the viewport
  var screenH=document.body.clientHeight;
  //Also get the y position of the element
  var yPos=elem.offsetTop;
  //And now calculate the maximal y position for elem when it is still visible
  var maxY=scrollY+screenH;

  if (yPos>scrollY && yPos<maxY && scrollY !=0) {
    //It is in the users viewport
    return true;
  } else {
    //It isn't in the users viewport
    return false;
  }
}

function checkStart (videoName) {
  var elem = document.getElementById(videoName);
  if (inViewPort(elem)) {
    elem.load();
    elem.play();
  } else if (!elem.ended) {
    setTimeout("checkStart('"+videoName+"');", 100);
  }
}

<body onLoad="checkStart('vid');">
    <div style="witdh: 100%; height: 1000px; background: #aaaaaa;">
      <h1>Scroll down to start the video</h1>
    </div>
    </p>
 
    <video src="http://www.w3schools.com/tags/movie.mp4" id="vid" width="500px" controls>
      Your browser doesn't support this video. Please upgrade your browser.
    </video>
</body>

HTML Doctype 导致视频在没有滚动到的情况下自动播放

HTML Doctype Causing Video Autoplay Without Scrolled to

html

javascript

video

autoplay