滚动到时自动播放Youtube视频
Autoplay Youtube Video When Scrolled to
当你在页面上滚动到youtube视频时,有什么方法可以自动播放吗?我试过在谷歌上搜索这个,看起来有一些方法可以用于旧的youtube嵌入代码。我正在寻找一个更新版本——有人知道当你在页面上向下滚动一定数量的像素时如何自动播放youtube视频吗?
感谢您的帮助
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"/>
使用以上内容可自动播放视频。根据你的问题,只在向下滚动时播放,检查这个线程。
基于滚动位置触发视频自动播放
这是完整的代码。已经在firefox和chrome上测试过了。你可以在这里检查样品。
http://www.foftv.com/samplejs/vidscroll2.html
<html><head>
<style>
#e1, #e2, #e3, #e4, #e5, # ytplayer{
height:390px; width:640px; display: block;
opacity: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars : {
autoplay : 0
},
videoId: 'M7lc1UVf-VE'
});
}
$(window).scroll(function() {
$("iframe").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 200 ) {
$(this).css('opacity',1);
player.playVideo();
} else {
$(this).css('opacity',0);
player.stopVideo();
}
});
});
</script>
</head>
<body>
<div id="e1">Some element 1</div>
<div id="e2">Some element 2</div>
<div id="e3">Some element 3</div>
<div id="ytplayer">Youtube player here</div>
<div id="e4">Some element 4</div>
<div id="e5">Some element 5</div>
</body>
</html>
我知道这是一个老问题,但我找到了一个完全符合我需求的解决方案,所以我想分享它;autoplay=1到iframe-src,它会自动播放视频。
$(window).scroll(function() {
//will trigger when your element comes into viewport
var hT = $('#YourElement').offset().top,
hH = $('#YourElement').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
//appends &autoplay=1 to iFrame src, making it autoplay
var videoUrl = $('#YourIFrame').attr('src');
$('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
}
我知道这是一个很老的问题,但我一直在谷歌上搜索,没有一个答案对我有效,所以这就是我最终实现的解决方案:
<div id="video-box">
<iframe id="i_video" src="" frameborder="0" allowfullscreen></iframe>
</div>
<script>
window.onscroll = function() {
var dv = document.getElementById('video-box');
var v = document.getElementById('i_video');
if ((window.scrollY < (dv.offsetTop + dv.offsetHeight)) && ((window.scrollY + window.outerHeight) > dv.offsetTop)) {
if (v.src=='' || v.src==location.href) {
v.src='VIDEO_URL';
}
} else {
v.src='';
}
}
</script>
相关文章:
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何用低音量自动启动Youtube视频(iframe)
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 在Android Kitkat上模拟鼠标点击Youtube视频
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- Lightbox关闭时停止播放Youtube视频
- 放大弹出生成“;找不到文件”;YouTube视频的错误
- 如何获取youtube视频的缩略图
- 从我的频道中提取最后3个youtube视频
- 你如何在youtube.com上获得youtube视频的状态
- 尝试制作youtube视频的缩略图,并在单击时将其放大
- 如何在Android WebView中嵌入Youtube视频
- jQuery:在for循环中运行youtube视频,播放最后一个视频
- 如何使用javascript在嵌入式youtube视频上创建可点击的时间戳链接
- 如何使用javascript(或jQuery)将youtube视频添加到iframe(基于web的RTE)
- 滚动时播放youtube视频
- youtube视频的正则表达式匹配模式可以以非贪婪的方式完成吗
- 允许我在用户操作后隐藏YouTube视频吗
- 改变嵌入式YouTube视频的方面配比