blocks|key|358982|text|您可以使用window.pageXOffset和window.pageYOffset检查浏览器窗口的垂直和水平滚动距离。将它们与window.innerWidth和innerHeight结合使用，并使用一些基本的几何数学来计算可见页面与视频本身的重叠程度。将所有这些都放在一个函数中，您可以将该函数附加到window对象上的scroll和resize事件，以便在每次滚动发生变化时运行检查。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|358983|下面是一些示例代码：|358984|var+video+=+document.getElementById('video'),
++++info+=+document.getElementById('info'),
++++fraction+=+0.8;

function+checkScroll()+{
++var+x+=+video.offsetLeft,
++++++y+=+video.offsetTop,
++++++w+=+video.offsetWidth,
++++++h+=+video.offsetHeight,
++++++r+=+x+%2B+w,+//right
++++++b+=+y+%2B+h,+//bottom
++++++visibleX,
++++++visibleY,
++++++visible;

++if+(window.pageXOffset+>=+r+%7C%7C
++++++window.pageYOffset+>=+b+%7C%7C
++++++window.pageXOffset+%2B+window.innerWidth+<+x+%7C%7C
++++++window.pageYOffset+%2B+window.innerHeight+<+y
+++++)+{++++

++++info.innerHTML+=+'0%25';
++++return;
++}

++visibleX+=+Math.max(0,+Math.min(w,+window.pageXOffset+%2B+window.innerWidth+-+x,+r+-+window.pageXOffset));
++visibleY+=+Math.max(0,+Math.min(h,+window.pageYOffset+%2B+window.innerHeight+-+y,+b+-+window.pageYOffset));

++visible+=+visibleX+*+visibleY+/+(w+*+h);

++info.innerHTML+=+Math.round(visible+*+100)+%2B+'%25';

++if+(visible+>+fraction)+{
++++video.play();
++}+else+{
++++video.pause();
++}

}

window.addEventListener('scroll',+checkScroll,+false);
window.addEventListener('resize',+checkScroll,+false);

//one+time+at+the+beginning,+in+case+it+starts+in+view
checkScroll();

//as+soon+as+we+know+the+video+dimensions
video.addEventListener('loadedmetadata',+checkScroll,+false);|code-block|syntax|javascript|358985|还有一台working+example。|358986|这段代码假设页面布局非常简单。如果你的视频绝对定位在另一个设置了"+position+:+relative“的元素中，那么你需要做更多的工作来计算视频的正确位置。(如果视频已使用CSS变换进行了移动，情况也是如此。)|358987|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/window.scrollX|1|https://developer.mozilla.org/en-US/docs/DOM/window.scrollY|2|http://jsbin.com/ocupor/1/edit^0|1S|H|2A|B|4I|6|4P|6|5|I|0|O|I|1|0|0|0|4|F|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|O|3|P|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

You can use <a href="https://developer.mozilla.org/en-US/docs/DOM/window.scrollX">window.pageXOffset</a> and <a href="https://developer.mozilla.org/en-US/docs/DOM/window.scrollY">window.pageYOffset</a> to check how far your browser window is scrolled both vertically and horizontally. Use these with <code>window.innerWidth</code> and <code>innerHeight</code> and some basic geometry math to calculate how much your visible page overlaps with the video itself. Put this all in a function that you can attach to the <code>scroll</code> and <code>resize</code> event on the window object to run the check every time the scrolling changes.

Here is some sample code:

<pre><code>var video = document.getElementById('video'),
 info = document.getElementById('info'),
 fraction = 0.8;

function checkScroll() {
 var x = video.offsetLeft,
 y = video.offsetTop,
 w = video.offsetWidth,
 h = video.offsetHeight,
 r = x + w, //right
 b = y + h, //bottom
 visibleX,
 visibleY,
 visible;

 if (window.pageXOffset &gt;= r ||
 window.pageYOffset &gt;= b ||
 window.pageXOffset + window.innerWidth &lt; x ||
 window.pageYOffset + window.innerHeight &lt; y
 ) { 

 info.innerHTML = '0%';
 return;
 }

 visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
 visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

 visible = visibleX * visibleY / (w * h);

 info.innerHTML = Math.round(visible * 100) + '%';

 if (visible &gt; fraction) {
 video.play();
 } else {
 video.pause();
 }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

//one time at the beginning, in case it starts in view
checkScroll();

//as soon as we know the video dimensions
video.addEventListener('loadedmetadata', checkScroll, false);
</code></pre>

And a <a href="http://jsbin.com/ocupor/1/edit">working example</a>.

This code assumes a pretty simple page layout. If your video is positioned absolutely inside another element that has "position: relative" set, then you'll need to do a little more work to calculate the correct position of the video. (The same goes if the video has been moved with CSS transforms.)

blocks|key|358989|text|希望这能帮上忙，但我之前已经回答过了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358990|http://jsfiddle.net/jAsDJ/|offset|length|358991|var+videos+=+document.getElementsByTagName("video"),
fraction+=+0.8;
function+checkScroll()+{

++++for(var+i+=+0;+i+<+videos.length;+i%2B%2B)+{

++++++++var+video+=+videos[i];

++++++++var+x+=+video.offsetLeft,+y+=+video.offsetTop,+w+=+video.offsetWidth,+h+=+video.offsetHeight,+r+=+x+%2B+w,+//right
++++++++++++b+=+y+%2B+h,+//bottom
++++++++++++visibleX,+visibleY,+visible;

++++++++++++visibleX+=+Math.max(0,+Math.min(w,+window.pageXOffset+%2B+window.innerWidth+-+x,+r+-+window.pageXOffset));
++++++++++++visibleY+=+Math.max(0,+Math.min(h,+window.pageYOffset+%2B+window.innerHeight+-+y,+b+-+window.pageYOffset));

++++++++++++visible+=+visibleX+*+visibleY+/+(w+*+h);

++++++++++++if+(visible+>+fraction)+{
++++++++++++++++video.play();
++++++++++++}+else+{
++++++++++++++++video.pause();
++++++++++++}

++++}

}

window.addEventListener('scroll',+checkScroll,+false);
window.addEventListener('resize',+checkScroll,+false);|code-block|syntax|javascript|358992|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

hope this helps but it has been answered before

<a href="http://jsfiddle.net/jAsDJ/">http://jsfiddle.net/jAsDJ/</a>

<pre><code>var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

 for(var i = 0; i &lt; videos.length; i++) {

 var video = videos[i];

 var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
 b = y + h, //bottom
 visibleX, visibleY, visible;

 visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
 visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

 visible = visibleX * visibleY / (w * h);

 if (visible &gt; fraction) {
 video.play();
 } else {
 video.pause();
 }

 }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
</code></pre>

blocks|key|359021|text|简而言之|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359022|假设我们的浏览器窗口W当前滚动到y位置scrollTop和scrollBottom|offset|length|style|CODE|359023|我们的视频将不会播放，当它的位置是V1或V2，如下面的快照。|359024|​|359025|📷|atomic|359026|359027|代码详细信息|359028|++++++++$(document).ready(function()+{
++++++++++++//+Get+media+-+with+autoplay+disabled+(audio+or+video)
++++++++++++var+media+=+$('video').not("[autoplay='autoplay']");
++++++++++++var+tolerancePixel+=+40;

++++++++++++function+checkMedia(){
++++++++++++++++//+Get+current+browser+top+and+bottom
++++++++++++++++var+scrollTop+=+$(window).scrollTop()+%2B+tolerancePixel;
++++++++++++++++var+scrollBottom+=+$(window).scrollTop()+%2B+$(window).height()+-+tolerancePixel;

++++++++++++++++media.each(function(index,+el)+{
++++++++++++++++++++var+yTopMedia+=+$(this).offset().top;
++++++++++++++++++++var+yBottomMedia+=+$(this).height()+%2B+yTopMedia;

++++++++++++++++++++if(scrollTop+<+yBottomMedia+&&+scrollBottom+>+yTopMedia){+//view+explaination+in+`In+brief`+section+above
++++++++++++++++++++++++$(this).get(0).play();
++++++++++++++++++++}+else+{
++++++++++++++++++++++++$(this).get(0).pause();
++++++++++++++++++++}
++++++++++++++++});

++++++++++++++++//}
++++++++++++}
++++++++++++$(document).on('scroll',+checkMedia);
++++++++});|code-block|syntax|javascript|359029|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3113d65337f8673bdc3afb22f30acaee.png|imageAlt^0|0|A|1|J|9|T|C|0|H|2|K|2|0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1D|8|@$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|O|3|K|5|6|7|1N|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1P|8|@]|9|@]|A|$U|V]]|$1|W|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

<h1>In brief</h1>

Let's say our browser window <code>W</code> currently scrolled to y-position <code>scrollTop</code> and <code>scrollBottom</code>

Our video will NOT be played when its position is at <code>V1</code> or <code>V2</code> as below snapshot.

<a href="https://i.stack.imgur.com/s3Obz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/s3Obz.png" alt="enter image description here"></a>

<h1>Code details</h1>

<pre><code> $(document).ready(function() {
 // Get media - with autoplay disabled (audio or video)
 var media = $('video').not("[autoplay='autoplay']");
 var tolerancePixel = 40;

 function checkMedia(){
 // Get current browser top and bottom
 var scrollTop = $(window).scrollTop() + tolerancePixel;
 var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

 media.each(function(index, el) {
 var yTopMedia = $(this).offset().top;
 var yBottomMedia = $(this).height() + yTopMedia;

 if(scrollTop &lt; yBottomMedia &amp;&amp; scrollBottom &gt; yTopMedia){ //view explaination in `In brief` section above
 $(this).get(0).play();
 } else {
 $(this).get(0).pause();
 }
 });

 //}
 }
 $(document).on('scroll', checkMedia);
 });
</code></pre>

blocks|key|359076|text|这个场景有一个新的接口，叫做Intersection_Observer_API，Chrome+51%2B和Edge+15%2B都支持它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|359077|var+options+=+{
++++root:+document.querySelector('.scroll-container'),
++++rootMargin:+'0px',
++++threshold:+1.0+//+trigger+only+when+element+comes+into+view+completely
};
var+ob+=+new+IntersectionObserver((entries,+observer)+=>+{
++++entries[0].target.classList.toggle('red');
},+options);

//+observe+all+targets,+when+coming+into+view,+change+color
document.querySelectorAll('.target').forEach((item)+=>+{
++++ob.observe(item);
});|code-block|syntax|javascript|359078|下面是一个简单的演示：https://codepen.io/hectorguo/pen/ybOKEJ|359079|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API|1|https://codepen.io/hectorguo/pen/ybOKEJ^0|E|P|0|0|0|B|13|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

There is a new API for this scenario, called <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="noreferrer">Intersection_Observer_API</a>, which
Chrome 51+ and Edge 15+ has supported.

<pre><code>var options = {
 root: document.querySelector('.scroll-container'),
 rootMargin: '0px',
 threshold: 1.0 // trigger only when element comes into view completely
};
var ob = new IntersectionObserver((entries, observer) =&gt; {
 entries[0].target.classList.toggle('red');
}, options);

// observe all targets, when coming into view, change color
document.querySelectorAll('.target').forEach((item) =&gt; {
 ob.observe(item);
});
</code></pre>

Here is a simple demo:
<a href="https://codepen.io/hectorguo/pen/ybOKEJ" rel="noreferrer">https://codepen.io/hectorguo/pen/ybOKEJ</a>

Is there anyway to autoplay a HTML5 video only when the user has the video (or a certain percentage of the video) in the browser viewport?

Play HTML5 Video when scrolled to

HTML5

只有当用户在浏览器视区中有视频(或一定比例的视频)时，才能自动播放HTML5视频吗？

问滚动到以下位置时播放HTML5视频
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到以下位置时播放HTML5视频EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到以下位置时播放HTML5视频
EN