Javascript 为什么我的代码可以在除Safari之外的所有浏览器中播放视频？
我正在开发一个需要在iFrame中播放视频的网站，除了Safari，它的工作原理基本正确，如果我在Safari中单击视频，它不会播放，但是如果我单击几次，它会开始播放，但没有图像，我只能听到声音，为什么？如何修复它 我的最低代码如下所示：Javascript 为什么我的代码可以在除Safari之外的所有浏览器中播放视频？,javascript,html,css,video,iframe,Javascript,Html,Css,Video,Iframe,我正在开发一个需要在iFrame中播放视频的网站，除了Safari，它的工作原理基本正确，如果我在Safari中单击视频，它不会播放，但是如果我单击几次，它会开始播放，但没有图像，我只能听到声音，为什么？如何修复它 我的最低代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link media="all" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,100italic,100,300italic,400italic,700,700italic,900,900italic">
<link media="screen" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/home-responsive.css?20180815-001">
<style>
div.Table
{
font-size: 218%;
text-align: center;
}
tr a{ font-size: 18px;color:#aabbcc; }
tr a:hover { color:#ddeeff; }
#modal
{
display: none;
position: fixed;
width: 100vw;
height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
background: rgba(24, 24, 24, .6);
z-index: 999;
}
#modal .content
{
position: relative;
width: 55%;
height: 65vh;
margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
}
#modal .content .yt-video
{
display: block;
width: 100%;
height: calc(100% - 45px);
}
#modal .content .title
{
box-sizing: border-box;
height: 45px;
line-height: 23px;
padding: 12px 4px;
margin: 0;
background: #007bff;
color: #fff;
text-align: center;
font-size: 26px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#modal .close
{
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
line-height: 36px;
text-align: center;
border: 0;
font-weight: bold;
font-size: 38px;
color: #fff;
background: #366;
cursor: pointer;
transition: background .2s;
}
#modal .content .close .a { font-size:38px;color: #ffffff; }
#modal .close:hover, #modal .close:active { background: #ff0000; }
#modal.is-visible { display: flex; }
</style>
</head>
<body class="page__guest ahrefs page-home">
<div id="localizejs">
<div class="content">
<a id="Videos"></a>
<div class="tools">
<div class="container center">
<div class="tools-icon">
<a href="https://www.youtube.com/embed/IgBIaZgoAQc?autoplay=1" target=_blank data-target="modal" data-video-title="Keypad Pins Easily Stolen"><img src="https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg" width=170 height=110 alt="Keypad Pins Easily Stolen"></a>
<p class="tools-icon__text">Keypad Pins Easily Stolen</p>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script defer src="js/home.js"></script>
</div>
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal">
<div class="content">
<div class="close"><a onclick = "return close_iFrame();">×</a></div>
<h4 class="title">.</h4>
<iframe class="yt-video" allowfullscreen></iframe>
</div>
</div>
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function (e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function (e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
}
</script>
</body>
</html>
分区表
{
字号：218%；
文本对齐：居中；
}
tr a{字体大小：18px；颜色：#aabbcc；}
tr a:hover{color:#ddeeff；}
#模态
{
显示：无；
位置：固定；
宽度：100vw；
高度：100vh；
最大高度：100vh；
排名：0；
左：0；
背景：rgba（24,24,24,6）；
z指数：999；
}
#模态.内容
{
位置：相对位置；
宽度：55%；
高度：65vh；
边距：自动；/*允许水平和垂直对齐。内容位于flex容器中*/
}
#modal.content.yt视频
{
显示：块；
宽度：100%；
高度：计算（100%-45px）；
}
#模态。内容。标题
{
框大小：边框框；
高度：45px；
线高：23px；
填充：12px 4px；
保证金：0；
背景：#007bff；
颜色：#fff；
文本对齐：居中；
字号：26px；
最大宽度：100%；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
#模态，关闭
{
位置：绝对位置；
排名：0；
右：0；
宽度：45px；
高度：45px；
线高：36px；
文本对齐：居中；
边界：0；
字体大小：粗体；
字号：38px；
颜色：#fff；
背景:#366；
光标：指针；
过渡：背景2；
}
#modal.content.close.a{字体大小：38px；颜色：#ffffff；}
#模式关闭：悬停，#模式关闭：活动{背景：#ff0000；}
#modal.is-visible{display:flex；}
&时代；
.
var modal=document.getElementById（'modal'），
closeBtn=modal.querySelector（'close'），
ytVideo=modal.querySelector（'.content.yt video'），
title=modal.querySelector（'.content.title'），
anchors=document.querySelectorAll（'a[data target=“modal”]”），
l=长度；
对于（变量i=0；i