【发布时间】：2019-02-05 21:18:09
【问题描述】：
我正在开发一个需要在 iFrame 中播放视频的网站，除了 Safari 之外，它大部分都可以正常工作，如果我在 Safari 中点击视频，它不会播放，但如果我点击它几次，它开始播放但没有图像，我只能听到声音，为什么？如何解决？
我的最低代码如下所示：
<!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>
【问题讨论】：
-
我有 Safari 版本 11.1.2 (13605.3.8)，它在 chrome 中工作，我没有看到任何问题
-
哪个是难题？什么版本的 Safari？几年前，Windows 就已经死了，它对应于 web api 所关注的 IE8。你会使用 IE8 来测试你的网站是否可以在 Edge 上运行吗？没有。此外，它从来没有达到反映任何 osX 版本的地步。所以把它扔掉吧。
-
谢谢@PavanKumarJorrigala，很高兴听到。
标签： javascript html css video iframe