javascript - 在视口中如何播放 Youtube 和 Facebook 视频?
问题描述
如何在 Viewport 中播放 Youtube 和 Facebook 视频?我正在尝试添加 facebook 视频,但它在视口中时没有播放?告诉我如何管理 youtube 和 facebook 视频以在视口中播放?如果我将 iframe 用于 youtube,我该如何在视口中播放视频?
<html>
<head>
<style>
#e1,
#e2,
#e3,
#e4,
#e5,
#ytplayer {
height: 390px;
width: 640px;
display: block;
opacity: 0;
}
</style>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Frjsb.mpfm%2Fvideos%2F2750454621691562%2F&show_text=0&width=560" width="560" height="316" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
<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="ytplayer">Youtube player here</div>
<div id="e4">Some element 4</div>
<div id="e5">Some element 5</div>
</body>
</html>
解决方案
搞定了。您的 opacity: 0;
CSS 中的内容阻止了视频显示
<html>
<head>
<style>
#e1,
#e2,
#e3,
#e4,
#e5,
#ytplayer {
height: 390px;
width: 640px;
display: block;
}
</style>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Frjsb.mpfm%2Fvideos%2F2750454621691562%2F&show_text=0&width=560" width="560" height="316" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
<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="ytplayer">Youtube player here</div>
<div id="e4">Some element 4</div>
<div id="e5">Some element 5</div>
</body>
</html>
推荐阅读
- pandas - 如果条件为真,Pandas 对下 n 行执行函数
- python - 在 Python 中将数据从数组转换为 C 结构
- amazon-web-services - AWS Fargate 容器无法启动并出现错误 CannotPullContainerError: 来自 daem 的错误响应
- android - 更新音量增大按钮上的按钮大小
- r - 如何根据值将行循环成一个组并创建一个我可以单独导出的数据框?
- java - 在recyclerView中显示两个fragment之间的传递数据
- c# - 设置 GraphQL.net
- javascript - 签名完成后在 activeuser 上接收 null
- python - 有没有办法在集群不活动的情况下将 Python 脚本连接到数据块上的数据?
- amazon-route53 - 如何解决:“收到来自自定义资源的响应状态 [FAILED]。返回的消息:资源不在状态 certificateValidated”?光盘