个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试淡入 YouTube iframe 嵌入，但它仅适用于 IE9，所有其他最新浏览器(Safari、Opera、Chrome、Firefiox)均无效。无论不透明度设置为 0，iframe 都会立即显示。
我使用的是 Windows。
我哪里错了？
ps:这与 Vimeo youtube iframe 嵌入配合得很好。
JsFiddle:
最佳答案
出于安全原因，当 iframe/最近层的 Alpha channel 级别(不透明度/背景)降低时，内联框架将变得完全可见。因此，即使不透明度设置为 0.99999，框架也会显示。
我为此问题创建了一个解决方案:创建两个大小相同的图层，并将它们添加到 iFrame 父级之后。
白色。然后，将第二个 DIV 设置为不透明度 0 的动画。第一张图像的背景变得更加明显。在动画结束时，使用回调函数隐藏第一个 div:
要允许用户在动画期间激活视频，请将单击事件处理程序绑定(bind)到 DIV，这会立即隐藏图层，并调用内嵌视频的 playVideo 方法。
要调用 playVideo 方法，您需要对嵌入视频的引用。由于您尚未使用 YouTube 视频 API 创建视频，因此无法使用全局变量来访问视频。不久前，我创建了一个函数来调用嵌入视频上的方法。
阅读:YouTube iframe API: how do I control a iframe player that's already in the HTML?
我在fiddle 创建了一个实例:http://jsfiddle.net/jgtSS/34/ 。完整代码如下所示。
<html><head>
<style>
#holder, #ID-of-first-div, #ID-of-second-div{
position:absolute;
width:320px;
height:240px;
top:0px;
left:0px;
}
#ID-of-first-div, #ID-of-second-div {
background: #FFF;
}
#btn1{
position:absolute;
background:#09C;
width:40px;
height:40px;
top:250px;
left:0px;
}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#btn1').click(function(){
var vid_id = $('#player').get(0).src.match(/embed\/([^?]+)/)[1];
var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
$('<img>').attr("src", vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('#ID-of-first-div');
$('#ID-of-second-div').animate({opacity: 0 }, 3000, function(){
$('#ID-of-first-div').hide();
});
var both = $('#ID-of-first-div, #ID-of-second-div');
both.click(function(){
both.hide();
callPlayer('player', 'playVideo');
});
});
});
/*
* @author Rob W (https://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html/7513356#7513356)
* @description Executes function on a framed YouTube video (see previous link)
* For a full list of possible functions, see:
* http://code.google.com/apis/youtube/js_api_reference.html
* @param String frame_id The id of the div containing the frame
* @param String func Desired function to call, eg. "playVideo"
* @param Array args (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args){
if(!document.getElementById(frame_id)) return;
args = args || [];
/*Searches the document for the IFRAME with id=frame_id*/
var all_iframes = document.getElementsByTagName("iframe");
for(var i=0, len=all_iframes.length; i<len; i++){
if(all_iframes[i].id == frame_id || all_iframes[i].parentNode.id == frame_id){
/*The index of the IFRAME element equals the index of the iframe in
the frames object (<frame> . */
window.frames[i].postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args,
"id": 1/*Can be omitted.*/
}), "*");
}
}
}
</script>
</head><body>
<div id="holder">
<iframe id="player" type="text/html" width="320" height="240"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent?enablejsapi=1"
frameborder="0"></iframe>
</div>
<div id="ID-of-first-div"></div>
<div id="ID-of-second-div"></div>
<div id="btn1"></div>
</body></html>
关于JQuery，淡入 YouTube iframe 嵌入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7865904/
24
4
0
上一篇：《人工智能是这样理解“情绪”的》 序言：这段话要优化吗？““嵌入”是一种将句子、单词或其他语言单位转换为向量表示的技术。这个向量通常位于高维空间中，它以一种能够表达相似性的方式编码出文本
我正在开发一个小型 Web 应用程序，其中有一个 object 元素(包含一个 embed)，用于显示小型文档。 文档可以是 PDF 或纯文本文件 (.txt)，我以 base64 字符串的形式从 W
我有一种小型语言，它基本上是 OCaml 的扩展(实际上它是 OCaml 子集的扩展，但这并不重要)。为了简化事情，我有一个“转义”表达式，可以将 OCaml 文字传输到我的语言中(因此您可以将任意
据我所知，我知道 embed tag用于嵌入来自 youtube 等网站的视频，object tag用于 Flash 视频和 video tags下HTML5 .但我很好奇这些标签的深入细节以及作为开
我假设您可以将 WebKit 嵌入到另一个桌面应用程序中并向其发送一个字符串，例如: Hello world! 它将显示在窗口内。 我的问题是，如果我将其压缩表示(JPEG 转储)加载到内存中，我该如
有没有一种可能的方式，我可以从youtube检索我的最新视频的列表(带有缩略图)，使用cron作业将嵌入的代码存储在数据库中，这样我就可以在单独的页面上显示视频，而不是将用户引向youtube观看视频
最近我发现我的网站上嵌入的 YouTube 视频存在问题 - 全屏按钮不再起作用。确实有过一次。该按钮是可见的，但单击时没有任何反应。 我正在使用 Youtube Javascript API 将视频
在 Keras 内置函数中嵌入使用哪种算法？Word2vec？手套？其他？ https://keras.io/layers/embeddings/ 最佳答案 简短的回答是都不是。本质上，GloVe 的
在 LSTM 上用于建模 IMDB 序列数据 ( https://github.com/fchollet/keras/blob/master/examples/imdb_lstm.py ) 的 ker
在机器学习中，通常用 one-hot-encoding 表示分类(特别是:名义)特征。 .我正在尝试学习如何使用 tensorflow 的嵌入层来表示分类问题中的分类特征。我有 tensorflow
我有一个使用 Storyboard的应用程序，我想在我的主视图中有一个 View ，并让它在场景中的不同 View 之间切换。 所以目前我有“容器对象”，我可以在其中嵌入另一个 viewControl
在我的项目中我遇到了这样的情况。 function fonsubmit() { alert('Out side PHP'); //Here the php code starts
我正在尝试添加一个JFileChooser，它选择父目录并允许用户输入文件名称。我知道 showSaveDialog 和 showOpenDialog 方法，但我不想创建新窗口。 这是我到目前为止所拥
我注意到我的网站创建了这样的链接:www.domain.com/post-name/embed/ 恐怕这可能会影响 SEO。是否可以禁用此功能？ 最佳答案 显然这是默认的 WordPress 行为。此
我试图从 C 代码调用 python 函数，我遵循了 here 中的示例 我也有正确的包含文件目录、库目录和链接 python32.lib(我使用 python 32)但是错误是 python/C A
我正在使用基于云的 EDR 平台来监控客户端受损网络上发生的进程。我最近经常看到的是使用选项“-Embedding”调用的 msiexec.exe C:\Windows\System32\MsiExe
我有一个列表，其中包含数百万个需要嵌入的句子。我正在使用 Flair以此目的。这个问题似乎应该是并行的。但是，当我尝试优化时，我的性能要么没有提高，要么只是停滞不前。 我将我的句子定义为一个简单的字符
我想在我的应用程序中添加嵌入的 YouTube 视频:我该怎么做？我有这个 import 'package:youtube_player/youtube_player.dart'; import 'p
我有 json 看起来像: myjson = {"queries":{"F.SP": 27}} 所以与 queryResults = JObject.Parse(jsonString) 我可以 fir
我在 html 文档中嵌入 highcharts 饼图时遇到问题。具体来说，我无法在不更改图表大小的情况下调整图表容器的大小。有谁知道您是否可以在不缩小图表的情况下减少默认填充？或者，您可以在不增加容
我是一名优秀的程序员,十分优秀！