sla*_*e10 6 safari video html5 autoplay
我有Instagram内容的摘要,其中包括最近的帖子.如果帖子是视频,则显示如下:带有自动播放,循环和静音属性的HTML5视频.
在美学上,结果非常令人愉悦; 但是在Safari中,当视频加载完毕后,浏览器会将网页向下跳到视频位置.它不会在Chrome中执行此操作.
视频不是主要内容,所以我不希望它跳过页面.
问题
是否有自动播放的W3C标准?即safari或chrome采用默认方法
解决这个问题的最佳方法是什么?
关于灵魂的思考
我可以关闭自动播放,而是触发JS的播放.然而,这似乎有点不必要,并创建一个新的依赖.
*更新:将滚动长度限制为 1500 个单位,直到视频开始播放后 2 秒...
<html>
<head>
<script type="text/javascript">
var scrollPosition = 0;
var videoLoaded = false;
function bodyOnScroll() {
// this 1500 value might need to be tweaked less or more depending
// on how far the scroll to your video is
if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded)
{
// don't scroll
document.body.scrollTop=scrollPosition;
}
else
{
// reload the variable to match current position
scrollPosition=document.body.scrollTop;
}
}
function videoOnPlaying(){
// wait 2 seconds and then disable the max scrollPosition
// might want to tweak this too depending
setTimeout(function () {
videoLoaded = true;
}, 2000);
}
</script>
</head>
<body onScroll="bodyOnScroll();">
<video autostart onPlay="videoOnPlaying();"></video>
Run Code Online (Sandbox Code Playgroud)