我需要制作一个具有自定义播放按钮和自定义图像预览的youtube播放器,当点击两个元素(播放按钮和图像预览)隐藏并且视频开始播放时。我在网上找到了以下代码,可以在Firefox和Chrome上正常使用,但是在Edge和IE上点击播放按钮时元素隐藏但视频无法自动播放,控制台显示错误"对象没有支持财产或方法' playVideo'"。
任何人都可以帮助我或给我一些指示,因为我的JavaScript并不是那么棒,我会绕圈子。一旦我对这个问题进行了排序,我需要调整代码,以便它允许我在同一页面上有两个视频。
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<style type="text/css">
button {
position: absolute;
top: 106px;
padding: 12px;
left: 174px;
}
.wrap{
width: 960px;
margin: 0 auto;
}
.videoWrap{
width: 500px;
height: 270px;
position: relative;
}
.start-video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 50px;
margin: auto;
opacity: .3;
cursor: pointer;
transition: all 0.3s;
}
.start-video:hover
{
opacity: 1;
-webkit-filter: brightness (1);
}
iframe{
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
.thumbnail_container
{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img.thumbnail
{
margin-top: -50px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="wrap">
<div class="videoWrap">
<div id="player"></div>
<div id="thumbnail_container" class="thumbnail_container">
<img class="thumbnail" id="thumbnail" />
</div>
<a class="start-video"><img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;
onYouTubeIframeAPIReady = function () {
player = new YT.Player('player', {
height: '244',
width: '434',
videoId: 'AkyQgpqRyBY', // youtube video id
playerVars: {
'autoplay': 0,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('player ready');
event.target.playVideo();
}
var p = document.getElementById ("player");
$(p).hide();
var t = document.getElementById ("thumbnail");
t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";
onPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.ENDED) {
$('.start-video').fadeIn('normal');
}
}
$(document).on('click', '.start-video', function () {
$(this).hide();
$("#player").show();
$("#thumbnail_container").hide();
player.playVideo();
});
</script>
</body>